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

媒体大师

这是问题。我有一个第三方脚本,需要将其嵌入到我的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';
})

Plunker:https://plnkr.co/edit/5rcnqUxHRHMthHmkwVuZ p = preview

克尔兹斯托夫·拉西涅夫斯基

如果要将第三方脚本(jQuery插件或其他东西)嵌入到AngularJS应用程序中,则应对此脚本(简单的指令组件编写包装器

您提出的方式行不通-我保证

为您找到了一个简单的示例,说明如何创建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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章