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

【问题标题】：Angularjs does not load scripts within ng-viewAngularjs 不会在 ng-view 中加载脚本
【发布时间】：2013-08-15 17:23:33
【问题描述】：

我有一些特定于视图的脚本。但是，当 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>

Main.html - 在 ng-view 下加载

hello world
  <script>

    alert('Hello, John!')

  </script>

在此示例中，当页面加载时，我看到网站上打印了一个基本的 hello world。但是，我没有弹出“你好，约翰”。

知道为什么我不能加载特定于某个视图的脚本吗？

额外信息 app.js

'use strict';

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

controllers/main.js

'use strict';

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

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

如果我包含需要与视图一起使用的脚本，如何在视图加载后触发它？我不想包含 jquery 和/或分散我的脚本。

要在不加载 jQuery 的情况下执行 <script> 标签，请使用 jqLite 找到 <script> 标签，然后使用 eval innerHTML。

app.controller("vm", function($scope, $element) {

  //FIND script and eval 
  var js = $element.find("script")[0].innerHTML;
  eval(js);

});

DEMO on PLNKR

另见AngularJS Issue #369 — jqLite should create elements in same way as jQuery

【讨论】：

【解决方案2】：

这就是 jqLite 的工作方式。如果您希望评估模板中的脚本，请在 AngularJS 之前包含 jQuery。如果包含 jQuery，脚本将被评估。尝试删除 jQuery，您会看到最初观察到的行为。

已更新：由于有人在 cmets 中要求详细说明，这里是：

当路由匹配时，ngView 使用 jqLite（或 jQuery，如果已加载）的 html() 方法来设置元素的内容（ngView 被声明）。换句话说，ngView.link() 做了这样的事情：

$element.html(template)

所以归结为html() 在 jqLite 和 jQuery 中是如何实现的。 jqLite 使用原生的innerHTML 属性，它只设置内容但不评估脚本。另一方面，jQuery 解析所有脚本标签并执行它们（通过构造脚本 DOM 元素并将其附加到页面）。

【讨论】：

添加 jquery 完成了这项工作！谢谢！ :)
他们可能删除了它，或者我不知道是什么原因。重点是：如果要执行脚本，请包含 jQuery。
您知道，jqLite 为什么以及如何做到这一点？还有其他方法可以代替 jQuery 吗？
@ZachL 这是一个很长的故事来适应评论，所以我已经附加了答案。希望对您有所帮助。
@ZachL jqLite 是 jQuery 的“精简”版本，包含 AngularJS 所需的最少 DOM 相关功能（html() 就是其中之一）。 AngularJS 开发人员不想开箱即用地依赖 jQuery，因为它非常庞大。 jqLite 的最小特性意味着如果你需要更多的东西（比如评估脚本的 html() 版本），你必须使用 jQuery。在初始化期间，AngularJS 代码会自动检查是否包含 jQuery，如果包含则使用，否则使用内置的 jqLite。