美文网首页
Angular 异步添加的 dom 里面ng绑定和js不执行不

Angular 异步添加的 dom 里面ng绑定和js不执行不

作者: kyle背背要转运 | 来源:发表于2017-06-26 15:17 被阅读0次

    描述:api.js 里面的子页面加载,异步获取html后ng的方法和js方法都不能执行。
    解释:angular不允许异步添加的html、js直接生效。需要$compile编译一下 js需要写directive指令重新执行

    // ng compile
    var el=$compile("HTML代码")(scope); element.append(el);
    
    // 具体用法
    // 子页面的html里面
    <script type="text/javascript-lazy" ng-src="XXXX.JS"></script>
    <script type="text/javascript-lazy" >
    alert('111')
    </script>
        
    // 主页面的js部分的需要加入下面的指令
        $app.directive('script', function ($compile) {
            return {
                restrict: 'E',
                scope: false,
                link: function (scope, elem, attr) {
    
                    if (attr.type === 'text/javascript-lazy' || elem.text().indexOf('childrenFunction.') > -1) {
    
                        if (attr.ngSrc) {
                            var script = document.createElement('script');
                            script.setAttribute('type', 'text/javascript');
                            script.setAttribute('src', attr.ngSrc);
                            document.body.appendChild(script);
                            return;
                        } else {
                            var code = elem.text();
                            var f = new Function(code);
                            f();
                        }
    
                    }
                }
            };
        });
    

    相关文章

      网友评论

          本文标题: Angular 异步添加的 dom 里面ng绑定和js不执行不

          本文链接:https://www.haomeiwen.com/subject/abhjcxtx.html