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

Question

在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可以,所以如果你需要这个功能,建议包括jQuery.

来自Angular的Igor Minar在这次讨论中:

我们研究了jqlite中的支持脚本标签,但是需要做些什么才能获得跨浏览器支持需要大量的黑魔法.出于这个原因,我们决定现在我们只是建议用户在这种特殊情况下使用jquery和angular.我们重写jquery的三分之一以使其在jqlite中工作是没有意义的.

这是相关的github问题,jqLit​​e应该以与jgor相同的方式创建元素,Igor总结,在结束问题之前,使用:

这对jqlite来说太疯狂了,所以我们不打算这样做.相反,我们将记录如果你想在ng:include或ng:view模板中有脚本元素,你应该使用jquery.

用jquery演示plunker

Answer 2

Angular使用$ sanitize on ng-include指令删除脚本.模板的更好方法是为该模板创建控制器.

最好为模板使用单独的控制器.

在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');
  }])