46

ビューに固有のスクリプトがいくつかありました。ただし、angularjs がビューをロードするときにスクリプトが実行されないようです。

索引.html

<html>
  <body ng-app="adminApp">

    <div ng-view=""></div>

    <script src="bower_components/angular/angular.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>

</body>
</html>

Main.html - ng-view でロード

hello world
  <script>

    alert('Hello, John!')

  </script>

この例では、ページが読み込まれると、基本的な Hello World が Web サイトに表示されます。ただし、「こんにちは、ジョン」というポップアップは表示されません。

特定のビューに固有のスクリプトを読み込めない理由はありますか?

追加情報 app.js

'use strict';

angular.module('adminApp', [])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

コントローラー/main.js

'use strict';

angular.module('adminApp')
  .controller('MainCtrl', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  });
4

2 に答える 2

64

それがjqLit​​eの仕組みです。テンプレート内のスクリプトを評価する場合は、AngularJS の前にjQueryを含めます。jQuery が含まれている場合、スクリプトが評価されます。jQuery を削除してみると、最初に確認された動作が表示されます。

更新: コメントで詳しい説明を求める人もいるので、以下に示します。

ルートが一致すると、ngViewjqLit​​e の (ロードされている場合は jQuery の)html()メソッドを使用して、要素のコンテンツを設定します (1 つngViewは宣言されています)。つまり、次のngView.link()ようなことを行います。

$element.html(template)

つまりhtml()、jqLit​​e と jQuery での実装方法に要約されます。jqLit​​e は、innerHTMLコンテンツを設定するだけでスクリプトを評価しないネイティブ プロパティを使用します。一方、jQuery はすべてのスクリプト タグを解析して実行します (スクリプト DOM 要素を作成してページに追加することにより)。

于 2013-08-13T22:37:15.153 に答える