Question

这是问题。我有一个第三方脚本，该脚本需要以<script>标签的形式嵌入到我的AngularJS应用程序中。我需要将范围变量传递给此脚本（名称，电子邮件等）。我在这里的第一个尝试是弄清楚是否可以在页面加载时将范围变量从控制器传递给脚本标签。也许有更好的方法，例如将脚本制作为模板，但我不确定。我担心如果我成功实现了这个基本概念，脚本标记将在传递变量之前呈现实际数据。

这是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

Answer 1

如果您要将第三方脚本（jQuery插件或其他东西）嵌入到AngularJS应用程序中，则应为此脚本编写包装器（简单的directive或component）

您提出的方式将不起作用-我保证

我为您找到了一个简单的example，如何创建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>

将AngularJS变量传递到html视图中的脚本标签

1 个答案: