Angularjs 不会在 ng-view 中加载脚本
Posted
技术标签:
【中文标题】Angularjs 不会在 ng-view 中加载脚本【英文标题】：Angularjs does not load scripts within 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'
];
);
【问题讨论】：
【参考方案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。以上是关于Angularjs 不会在 ng-view 中加载脚本的主要内容，如果未能解决你的问题，请参考以下文章
Angular JS：单击按钮后如何在特定元素中加载 Angular js 部分视图页面
为啥我的 AngularJS 视图无法在 Cordova 中加载？
构建混合 angular/angularjs 应用程序 - 如何在 angularjs 应用程序中加载 Angular 模块