脚本不templateurl运行 [英] script not running in templateurl
问题描述
这是我的角度js文件
test.js文件：
test.js file:
var app = angular.module("angleapp", [])
.controller('MainController', ['$scope', function ($scope) {
$scope.test = "hi all"
}])
.directive('programlisting', function () {
return {
restrict: 'E',
scope: {
},
templateUrl: '/directives/test.html'
};
});
的test.html文件：
test.html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
alert("stop");
</script>
</head>
<body>
hi how are you
</body>
</html>
这是我的索引文件：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="/directives/test.js"></script>
</head>
<body data-ng-app="angleapp">
<div class="main" ng-controller="MainController">
<programlisting></programlisting>
</div>
</body>
</html>
现在，当我尝试运行此
hi how are you
在输出到来。但警报窗口不会弹出运我在哪里我的问题呢？
is coming in the output. but the alert window does not pop-op where i am i going wrong?
推荐答案
的问题是，剧本标签不被当自动 templateUrl 的情况发生）。通常这种标签编程方式评估（评估）。 jQuery不会，但jqLite（jQuery的内部类实现角的）没有。
The problem is that script tags are not executed by browser automatically when injected with innerHTML (what happens in case of templateUrl). Normally this tags are evaluated programmatically (eval). jQuery does it but jqLite (internal jQuery-like implementation of Angular) does not.
在你的情况的解决方法是简单的，移动jQuery脚本标记的前的角，然后将角使用jQuery的DOM操作：
In your case the fix is simple, move jquery script tag before angular, then Angular will use jQuery for DOM manipulations:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
此外，你需要清理你的的test.html 模板，只留下主体内容。这是怎么的test.html 应该是：
Also, you need to clean up your test.html template, leave only body content. This is how test.html should look:
hi how are you
<script type="text/javascript">
alert("stop");
</script>
最后，我不知道为什么你需要有局部模板内的脚本标签，但在大多数情况下，这是坏主意，并有更好的方法。
And finally, I don't know why you need to have script tag inside of partial template, but in most cases this is bad idea, and there are better approaches.
这篇关于脚本不templateurl运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
