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 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>
is coming in the output. but the alert window does not pop-op where i am i going wrong?
解决方案
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.
In your case the fix is simple, move jquery script tag before angular, then Angular will use jQuery for DOM manipulations:
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.
