Question

我正在使用AngularJs和模板系统。我想为每个模板添加特定的内联javascript脚本，为选定的选项卡添加警告框（主页|列表|设置）

Html渲染： 但是添加了ng-scope，当你更改标签时没有任何警报。

<script type="text/javascript" class="ng-scope">alert("home")</script>

我在这里提供示例：

http://bit.ly/HWcN1H

或在这里

带有警报（“template1”）的

plunkr example出现在template1.html中，但呈现为

<script type="text/javascript" class="ng-scope">alert("template1")</script>

Answer 1

我在github

改进了endorama的解决方案

同样的过程。

创建angular-loadscript.js（来自上面的链接）
在您的应用中使用＆nbsp; ngLoadScript＆＃39;作为资源依赖。

var app = angular.module（＆＃39; YOUR_APP_NAME＆＃39;，[＆＃39; ngResource＆＃39;，＆＃39; ngRoute＆＃39;，...，＆＃39; ngLoadScript＆＃39; ]）;
在您的部分使用中

一切都应该按要求运作：

/*global angular */
(function (ng) {
  'use strict';

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

  app.directive('script', function() {
    return {
      restrict: 'E',
      scope: false,
      link: function(scope, elem, attr) 
      {
        if (attr.type==='text/javascript-lazy') 
        {
          var s = document.createElement("script");
          s.type = "text/javascript";                
          var src = elem.attr('src');
          if(src!==undefined)
          {
              s.src = src;
          }
          else
          {
              var code = elem.text();
              s.text = code;
          }
          document.head.appendChild(s);
          elem.remove();
          /*var f = new Function(code);
          f();*/
        }
      }
    };
  });

}(angular));

Answer 2

通过编写指令有一个解决方案：

https://gist.github.com/endorama/7369006

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

  app.directive('script', function() {
    return {
      restrict: 'E',
      scope: false,
      link: function(scope, elem, attr) {
        if (attr.type=='text/javascript-lazy') {
          var code = elem.text();
          var f = new Function(code);
          f();
        }
      }
    };
  });

部分使用：

  <script type="text/javascript-lazy" >
alert("lazy loaded");
  </script>

为什么ng-scope被添加到我的局部视图内联的javascript中并使警报无效？

2 个答案: