angularjs - なぜ ng-scope が部分ビューの JavaScript インラインに追加され、アラートが機能しないのですか?

Question

テンプレートシステムでAngularJsを使用しています。特定のインライン JavaScript スクリプトを各テンプレートに追加して、選択したタブに関する警告ボックスを追加したい ( Home | List | Settings )

Html レンダリング: ただし、ng-scope が追加され、タブを変更しても何も警告されません。

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

ここで例を利用できるようにします：

http://bit.ly/HWcN1H

またはここ

template1.htmlに alert("template1") が存在するが、次のようにレンダリングされるplunkr の例

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

Answer 1

githubで endorama のソリューションを改善しました

同じプロセス。

1. angular-loadscript.js を作成します (上記のリンクから)

2. アプリでは、リソースの依存関係として「ngLoadScript」を使用します。

   var app = angular.module('YOUR_APP_NAME', ['ngResource','ngRoute', ...,'ngLoadScript']);

3. 部分的に「text/javascript-lazy」を MIME タイプとして使用します。

すべてが必要に応じて機能するはずです。

/*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>