我有一些特定于视图的脚本。然而,当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打印在网站上。但是,我没有看到任何弹出窗口说“你好,John”。
知道为什么我不能加载特定于某个视图的脚本吗?
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'
];
});
发布于 2013-08-14 06:37:15
这就是jqLite的工作方式。如果希望评估模板中的脚本,请在AngularJS之前包含jQuery。如果包含jQuery,则将对脚本进行评估。尝试删除jQuery,您会看到最初观察到的行为。
更新了:由于一些人在评论中要求详细说明,这里是:
当路由匹配时,ngView
使用jqLite的html()
方法(如果已加载,则使用jQuery的)来设置元素的内容(声明为ngView
的那个元素)。换句话说,ngView.link()
做这样的事情:
$element.html(template)
因此,这可以归结为如何在jqLite和jQuery中实现html()
。jqLite使用原生innerHTML
属性,该属性只设置内容,而不计算脚本。另一方面,jQuery解析出所有脚本标记并执行它们(通过构造脚本DOM元素并将其附加到页面)。
发布于 2017-03-17 06:16:35
如果我包含了需要处理视图的脚本,如何在视图加载后触发它?我不想包含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);
});
The DEMO on PLNKR
另请参阅AngularJS Issue #369 — jqLite should create elements in same way as jQuery
https://stackoverflow.com/questions/18220197
复制相似问题