Html Angularjs 不会在 ng-view 中加载脚本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18220197/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs does not load scripts within ng-view
提问by Karan
I had some scripts specific to a view. However, the script does not seem to execute when angularjs loads the view.
我有一些特定于视图的脚本。但是，当 angularjs 加载视图时，脚本似乎没有执行。
Index.html
索引.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- loads under ng-view
Main.html- 在 ng-view 下加载
hello world
<script>
alert('Hello, John!')
</script>
In this example, when the page load, I see a basic hello world printed on the website. However, I do not get any pop up saying "Hello, John".
在这个例子中，当页面加载时，我看到一个基本的 hello world 打印在网站上。但是，我没有收到任何说“你好，约翰”的弹出窗口。
Any idea why I cannot load scripts specific to a certain view?
知道为什么我无法加载特定于某个视图的脚本吗？
Extra infoapp.js
额外信息app.js
'use strict';
angular.module('adminApp', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
controllers/main.js
控制器/main.js
'use strict';
angular.module('adminApp')
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
回答by Buu Nguyen
That's the way jqLiteworks. If you want scripts in templates to be evaluated, include jQuerybefore AngularJS. If jQuery is included, the script will be evaluated. Try removing jQuery, and you see the originally observed behavior.
这就是jqLite 的工作方式。如果您希望评估模板中的脚本，请在 AngularJS 之前包含jQuery。如果包含 jQuery，将评估该脚本。尝试删除 jQuery，您会看到最初观察到的行为。
Updated: since some people asked for elaboration in the comments, here it is:
更新：由于有人要求在评论中详细说明，这里是：
When a route is matched, ngViewuses jqLite's (or jQuery's, if loaded) html()method to set the content of the element (the one ngViewis declared on). In other words, ngView.link()does something like this:
当路由匹配时，ngView使用 jqLite 的（或 jQuery 的，如果已加载）html()方法来设置元素的内容（ngView声明的内容）。换句话说，ngView.link()做这样的事情：
$element.html(template)
So it boils down to how html()is implemented in jqLite and jQuery. jqLite uses the native innerHTMLproperty, which only sets content but doesn't evaluate scripts. jQuery, on the other hand, parses out all script tags and executes them (by constructing and appending script DOM elements to the page).
所以它归结为如何html()在 jqLite 和 jQuery 中实现。jqLite 使用 nativeinnerHTML属性，它只设置内容但不评估脚本。另一方面，jQuery 解析出所有脚本标记并执行它们（通过构造脚本 DOM 元素并将其附加到页面）。
回答by georgeawg
If I include my script that needs to work with the view, how can I trigger it when the view has loaded? I don't want to include jquery and/or fragmentate my script.
如果我包含需要处理视图的脚本，我如何在视图加载后触发它？我不想包含 jquery 和/或分散我的脚本。
To execute the <script>tag without loading jQuery, use jqLiteto find the <script>tag and then evalthe innerHTML.
要在<script>不加载 jQuery 的情况下执行标记，请使用jqLite查找<script>标记，然后eval使用innerHTML.
app.controller("vm", function($scope, $element) {
//FIND script and eval
var js = $element.find("script")[0].innerHTML;
eval(js);
});
The DEMO on PLNKR
See also AngularJS Issue #369 — jqLite should create elements in same way as jQuery
