Angularjs不加载NG-视图中的脚本 [英] Angularjs does not load scripts within ng-view
问题描述
我有一些具体到一个视图脚本。不过，此脚本似乎并不时angularjs加载视图来执行。
的index.html
＆LT; HTML和GT;
＆LT;机身NG-应用=adminApp＆GT; ＆LT; DIV NG-视图=＆GT;＆LT; / DIV＆GT; ＆所述; SCRIPT SRC =bower_components /角度/ angular.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =脚本/ app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =脚本/控制器/ main.js＆GT;＆LT; / SCRIPT＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
main.html中 - 在NG-观点负载
的Hello World
＆LT;脚本＆GT; 警报（你好，约翰！） ＆LT; / SCRIPT＆GT;
在本实施例中，当页面负载，我看到一个基本的hello world印在网站上。但是，我没有得到任何弹出说：喂，约翰。
任何想法，我为什么不能加载特定的脚本有一定的看法？
的附加信息的
app.js
使用严格的;angular.module（'adminApp'，[]）
的.config（函数（$ routeProvider）{
$ routeProvider
。什么时候（'/'， {
templateUrl：意见/ main.html中，
控制器：'MainCtrl
}）
。除此以外（{
redirectTo：'/'
}）;
}）;
控制器/ main.js
使用严格的;angular.module（'adminApp'）
.controller（'MainCtrl'，函数（$范围）{
$ scope.awesomeThings = [
HTML5样板，
AngularJS'，
因果报应
];
}）;
就是这样 jqLite 的作品。如果你想在模板脚本进行评估，包括的jQuery AngularJS之前。如果包括jQuery的，该脚本将进行评估。尝试删除jQuery的，你可以看到原来观察到的行为。
更新：既然有人问阐述的意见，那就是：
当一个路由匹配， ngView 使用jqLite（或jQuery的，如果加载） HTML（）方法设置元素的含量（一个 ngView 被宣布）。换句话说， ngView.link（）确实是这样的：
$ element.html（模板）
所以它归结为如何 HTML（）在jqLite和jQuery实现。 jqLite使用本机的innerHTML 属性，只设置的内容，但不执行脚本。 jQuery的，另一方面，解析出所有脚本标签并执行它们（通过构建和追加脚本的DOM元素的网页）。
I had some scripts specific to a view. However, the script does not seem to execute when angularjs loads the view.
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 - loads under 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".
Any idea why I cannot load scripts specific to a certain view?
Extra info 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'
];
});
That's the way jqLite works. If you want scripts in templates to be evaluated, include jQuery before AngularJS. If jQuery is included, the script will be evaluated. Try removing jQuery, and you see the originally observed behavior.
Updated: since some people asked for elaboration in the comments, here it is:
When a route is matched, ngView uses jqLite's (or jQuery's, if loaded) html() method to set the content of the element (the one ngView is declared on). In other words, ngView.link() does something like this:
$element.html(template)
So it boils down to how html() is implemented in jqLite and jQuery. jqLite uses the native innerHTML property, 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).
这篇关于Angularjs不加载NG-视图中的脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
