Question

这是我的角度js文件

test.js文件：

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文件：

<!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

即将出现在输出中。但警报窗口没有弹出我在哪里出错？

Answer 1

问题是当注入script时，浏览器不会自动执行innerHTML标记（在templateUrl的情况下会发生什么）。通常，此编码会以编程方式进行评估（eval）。 jQuery做到了，但jqLite（类似于Angular的内部jQuery实现）却没有。

在你的情况下，修复很简单，在角度之前移动jquery脚本标记，然后Angular将使用jQuery进行DOM操作：

<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的样子：

hi how are you <script type="text/javascript"> alert("stop"); </script>

最后，我不知道为什么你需要在部分模板中加入脚本标签，但在大多数情况下这是个坏主意，并且有更好的方法。

Answer 2

在partials html页面（test.html）中，无需编写doctype，head和body标签。只需编写您的html元素和脚本。它应该工作。

脚本没有在templateurl中运行

2 个答案: