脚本未在 templateurl 中运行答案

【问题标题】：script not running in templateurl脚本未在 templateurl 中运行
【发布时间】：2015-08-17 10:26:17
【问题描述】：

这是我的 Angular 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

正在输出中。但是警告窗口没有弹出我哪里出错了？

【问题讨论】：

标签： javascript jquery angularjs angularjs-directive highcharts

【解决方案1】：

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

在你的情况下，修复很简单，移动 jquery 脚本标签 before 角度，然后 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>

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

【讨论】：

thnx a ton.. 在这里被困了一个多小时。顺便说一句，比在部分模板中使用脚本标签更好的方法是什么？
你可以查看指令标签的链接属性
这取决于你想做什么。为什么你需要模板内的脚本？但在你的情况下，因为你有自定义指令，你应该使用指令的链接功能。这是在模板渲染并连接到范围后要执行的代码。 docs.angularjs.org/api/ng/service/$compile#-link-
自 html5 以来未执行脚本标记。参考developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

【解决方案2】：

在部分html页面(test.html)中，不需要写doctype、head和body标签。只需编写您的 html 元素和脚本。它应该可以工作。

【讨论】：

已经试过了，但没用，我的意思是警报窗口不显示
你能创建 JS fiddle 吗？