angularjs 1 如何在ng-route的模板中使用script标签

Posted 2020-11-18 axel10

　　如果你在angularjs 的路由模板里使用<script>标签的话，你会发现标签不起作用。这是因为angular为了安全起见而禁止了模板执行script。如果一定要在路由模板里使用script标签该怎么办呢？比较方便的方法是使用自定义指令。

    var app = angular.module(‘vcsite‘, [‘ngRoute‘]);

    app.directive(‘script‘, function() {
        return {
            restrict: ‘E‘,
            scope: false,
            link: function(scope, elem, attr)
            {
                if (attr.type===‘text/javascript-lazy‘)
                {
                    var s = document.createElement("script");
                    s.type = "text/javascript";
                    var src = elem.attr(‘src‘);
                    if(src!==undefined)
                    {
                        s.src = src;
                    }
                    else
                    {
                        var code = elem.text();
                        s.text = code;
                    }
                    document.head.appendChild(s);
                    elem.remove();
                }
            }
        };
    });

定义这个自定义指令后，在模版页使用<script  type=‘text/javascript-lazy‘></script>即可执行脚本。