Передайте переменную AngularJS тегу script в представлении html - PullRequest
Новая
       1

Передайте переменную AngularJS тегу script в представлении html

0 голосов
/ 01 декабря 2018

Вот проблема.У меня есть сторонний скрипт, который должен быть встроен в мое приложение AngularJS, в html как тег <script>.Мне нужно передать переменные области видимости в этот скрипт (имя, адрес электронной почты и т. Д.).Моя первая попытка - выяснить, могу ли я передать переменную области действия из контроллера в тег сценария при загрузке страницы.Возможно, есть лучший подход, например, сделать скрипт шаблоном, но я не уверен.Я обеспокоен тем, что, если мне удастся реализовать эту базовую концепцию, тег сценария будет отображать реальные данные перед передачей переменной.

Вот HTML: 

  <body>
    <div ng-controller="MainCtrl">
        Angular variable: {{foo}}
    </div>
  </body>
  <script type="text/javascript">
    console.log(foo); // $scope.foo?
  </script>

Вот контроллер: 

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
      $scope.foo = 'bar';
})

Плункер: https://plnkr.co/edit/5rcnqUxHRHMthHmkwVuZ?p=preview

1 Ответ

0 голосов
/ 01 декабря 2018

Если вы хотите встроить сторонний скрипт (плагин jQuery или что-то еще) в ваше приложение AngularJS, вам следует написать оболочку для этого скрипта (простая директива или component )

Представленный вами способ не сработает - я гарантирую

Я нашел простой пример для вас, как создать директиву AngularJS и обернуть какой-нибудь простой плагин jquery: 

<html>
<head>
    <title>AngularJS wrapp jquery plugin</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://raw.github.com/SamWM/jQuery-Plugins/master/numeric/jquery.numeric.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.directive('numberMask', function() {
            return {
                restrict: 'A',
                link: function(scope, element, attrs) {
                    $(element).numeric();
                }
            }
        });
    </script>
</head>

<body>
    <div ng-app="myApp">
        <div>
            <input type="text" min="0" max="99" number-mask="" ng-model="message"> 
        </div>
    </div>

</body>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...