angular动态加载script标签 - angularjs

在写一段代码的时候，需要这样的一个功能：想多次执行这个script标签里面的代码，但是结果显示，虽然angular正确的刷新了dom，但是script在控制台中，却只打印了一次fyy，实际上我希望打印两次。经过多方查找，发现原来angular内置的jqlite是不支持script标签的，而我的jquery引用代码被放到了angular.js的后面，那么angular实际上加载的就是其内置的jqlite，所以，我的script只是在页面加载，angular未执行的时候被调用了一次。我把jquery.js放到angular.js前面加载，又出现一个问题，就是页面中打印了三次fyy，这是因为在页面加载初期，这段代码就已经执行过一次了。

<div ng-repeat="a in as">
    <script>
        console.log("fyy");
    </script>
</div>

那么，如何按照我的需求来正确的加载这个script呢？在angular中，有一个内置的指令，叫做ng-include，ng-include="'url'" 将url显示在ng-include所在的位置注意url一定是两层引号括起来的，因为它是个字符串 ng-include和ng-view的主要区别就是ng-view一个页面只有一个，而ng-include可以放在多个位置。所以，我把我的script标签单独的放在一个html文件中，页面代码改为：

<div ng-repeat="a in as" ng-include="‘script.html’">//注意这里面的单引号
</div>

好了，这回就是我想要的结果了。

下面，我有了一个新的需求：

<div ng-repeat="a in as" >
    {{a}}
    <script>
        console.log('{{a}}');
    </script>
</div>

先不看打印次数的问题，我想要把{{a}}传递到script脚本当中，打印出来的结果是{{a}}，因为angular的取值表达式和script内部是没有交流的。所以想要实现这样的功能，我们想到可以用指令来实现，将script标签内容作为模板，封装成一个指令： js

             directive("myscript", function () {
                    return {
                        restrict: "AE",
                        template: "<script>console.log('{{a}}')<\/script>",
                        link: function (scope) {
                        }
                    }
                })

html：

<div ng-repeat="a in as">
    <myscript></myscript>
</div>

好了，我们的打印结果依旧是{{a}}，好吧，依旧是script和angular变量不能通信。其实我也不是很明白原因。 在指令对象中，有一个link函数，这个函数可以传递四个参数，前两个是scope和element，scope是当前指令的scope对象，element是当前指令元素。这样来做：

              .directive("myscript", function () {
                    return {
                        restrict: "AE",
                        link: function (scope,ele) {
                            $(ele).append("<script>console.log('"+scope.a+"')<\/script>")
                        }
                    }
                })

终于得到我想要的结果了。