在AngularJS中，包含在HTML模板中的任何内嵌JavaScript代码都不起作用

在AngularJS中，包含在HTML模板中的任何内嵌JavaScript代码都不起作用。

例如：

main.html文件：

<div ng-include="'/templates/script.html'"></div> 

和script.html文件：

 <script type="text/javascript"> alert('yes'); </script> 

当我打开主页面时，我希望有一个警告消息说“是”，但没有任何反应。 我认为AngularJS中的一些安全限制是防止内联脚本，但我找不到任何解决方法。

注：我不使用jQuery或任何其他框架，只有AngularJS 1.2.7。

Answer 1

jQlite不支持脚本标记。 jQuery的确如此，所以如果你需要这个function的话，推荐使用jQuery。

来自Angular的Igor Minar在这个讨论中 ：

我们研究了支持jqlite中的脚本标签，但是为了获得跨浏览器支持需要做些什么，这涉及到很多黑魔法。 由于这个原因，我们决定现在我们只是build议用户在这种情况下使用jQuery和angular。 重写jQuery的三分之一以使其在jqlite中工作是没有意义的。

下面是相关的github问题jqLit​​e应该创build元素的方式与jgor在Igor总结，在closures问题之前，与此：

这对于jqlite来说太疯狂了，所以我们不打算这样做。 相反，我们要logging如果你想在ng：include或ng：view模板中有脚本元素，你应该使用jquery。

演示与jquery plunker

Answer 2

Angular在ng-include指令上使用$ sanitize来清除脚本。 更好的模板方法是为该模板创build一个控制器。

对模板使用单独的控制器更好。

在template.html中

 <form role="form" ng-controller="LoginController"> <input type="text" placeholder="Email" ng-model="email"> <input type="password" placeholder="Password" ng-model="password"> <button class="btn btn-success" ng-click="login()">Sign in</button> </form> 

在LoginController你可以使用任何你想要的代码

 angular.module('myApp.controllers', []). controller('LoginController', [function() { alert('controller initialized'); }]) 

Answer 3

当ng-include添加内容时触发的事件是$includeContentLoaded 。 你的脚本应该包含在这个事件中：

例如（ Plucker Demo ）：

 function SettingsController($scope, $window) { $scope.template={}; $scope.template.url = "demo.html"; $scope.$on('$includeContentLoaded', function(event){ $window.alert('content load'); }); } 

另外你可以使用onload属性来设置init函数：

HTML

<div ng-include =“template.url”onload =“alertMe（）”> </ div> </ div>

调节器

 $scope.alertMe=function(){ $window.alert('sending alert on load'); } 

Answer 4

包括jQuery和更改angular.js和jquery.js顺序。 jQuery必须是第一个，否则不起作用