我正在尝试编译其中包含样式和脚本标记的HTML。 HTML编译正确,代码添加到DOM,样式也可以,但脚本不会执行。
任何人都知道为什么?
请参阅下面的代码。 " Hello World"以粗体显示,但window.alert
未显示。
<html>
<body>
<div ng-app="myModule">
<div ng-controller="myController">
<div compile="html"></div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script type="text/javascript">
<!--
var module = angular.module("myModule", []);
module.controller("myController", function ($scope) {
$scope.message = "World";
var html = "<div class='hello'>Hello {{ message }}</div>";
var style = "<style type='text/css'>.hello { font-weight: bold; }</style>";
var script = "<script type='text/javascript'>window.alert('Hello from JS!');</script>";
$scope.html = html + style + script;
});
module.directive("compile", function ($compile) {
return function (scope, element, attrs) {
scope.$watch(
function (scope) {
return scope.$eval(attrs.compile);
},
function (value) {
element.html(value);
$compile(element.contents())(scope);
}
);
};
});
//-->
</script>
</body>
</html>