angular动态加载script标签
发布在angularjs2016年5月19日view:5985
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

在写一段代码的时候,需要这样的一个功能:想多次执行这个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>")
                        }
                    }
                })

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

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
angularjs

angularjs 学习总结

我的收藏