为什么AngularJS $ compile不执行javascript代码?

时间:2018-05-22 00:40:19

标签: angularjs angularjs-directive angularjs-compile

我正在尝试编译其中包含样式和脚本标记的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>

0 个答案:

没有答案