Angularjs不会在ng-view中加载脚本

Kar*_*ran 46 html javascript angularjs

我有一些特定于视图的脚本.但是,当angularjs加载视图时,脚本似乎不会执行.

的index.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>
Run Code Online (Sandbox Code Playgroud)

Main.html - 在ng-view下加载

hello world
  <script>

    alert('Hello, John!')

  </script>
Run Code Online (Sandbox Code Playgroud)

在这个例子中,当页面加载时,我看到网站上印有一个基本的hello世界.但是,我没有得到任何弹出说"你好,约翰".

知道为什么我无法加载特定视图的脚本吗?


额外信息 app.js

'use strict';

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

控制器/ main.js

'use strict';

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

Buu*_*yen 63

这就是jqLit​​e的工作方式.如果您希望评估模板中的脚本,请在AngularJS之前包含jQuery.如果包含jQuery,则将评估该脚本.尝试删除jQuery,您会看到最初观察到的行为.

更新:由于有些人要求在评论中详细说明,这里是:

当路由匹配时,ngView使用jqLit​​e(或jQuery,如果加载)html()方法来设置元素的内容(ngView声明一个).换句话说,ngView.link()做这样的事情:

$element.html(template)
Run Code Online (Sandbox Code Playgroud)

所以它归结为如何html()在jqLit​​e和jQuery中实现.jqLit​​e使用本机innerHTML属性,该属性仅设置内容但不评估脚本.另一方面,jQuery解析所有脚本标记并执行它们(通过构造脚本DOM元素并将其附加到页面).

  • @ZachL jqLit​​e是jQuery的"精简"版本,包含AngularJS所需的最小DOM相关功能(html()就是其中之一).AngularJS开发人员不希望开箱即用jQuery,因为它非常庞大.jqLit​​e的最小特性意味着如果你需要更多(比如评估脚本的html()版本),你必须使用jQuery.在初始化期间,AngularJS代码会自动检查是否包含jQuery并使用它,否则它使用内置的jqLit​​e. (3认同)