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>
Main.html - 在ng-view下加载
hello world
<script>
alert('Hello, John!')
</script>
在这个例子中,当页面加载时,我看到网站上印有一个基本的hello世界.但是,我没有得到任何弹出说"你好,约翰".
知道为什么我无法加载特定视图的脚本吗？
额外信息 app.js
'use strict';
angular.module('adminApp', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
控制器/ main.js
'use strict';
angular.module('adminApp')
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
Buu*_*yen 63
这就是jqLite的工作方式.如果您希望评估模板中的脚本,请在AngularJS之前包含jQuery.如果包含jQuery,则将评估该脚本.尝试删除jQuery,您会看到最初观察到的行为.
更新:由于有些人要求在评论中详细说明,这里是:
当路由匹配时,ngView使用jqLite(或jQuery,如果加载)html()方法来设置元素的内容(ngView声明一个).换句话说,ngView.link()做这样的事情:
$element.html(template)
所以它归结为如何html()在jqLite和jQuery中实现.jqLite使用本机innerHTML属性,该属性仅设置内容但不评估脚本.另一方面,jQuery解析所有脚本标记并执行它们(通过构造脚本DOM元素并将其附加到页面).