I'm trying to compile a HTML that has style and script tags inside it. The HTML is compiled properly and the code is added to the DOM, the style also works, but the script is not executed.
Anyone knows why?
See the code below. The "Hello World" is shown in bold, but the window.alert is not raised.
<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>
