美文网首页
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不执行不

    描述:api.js 里面的子页面加载,异步获取html后ng的方法和js方法都不能执行。解释:angular不允许...

  • AngularJS学习笔记

    引入angular.js 若在页面中引入了angular.js并添加了ng-app="app" ng-contro...

  • Angular 4 事件冒泡

    Angular 组件和 DOM 元素通过事件与外部进行通信, Angular 事件绑定语法对于组件和 DOM 元素...

  • ng-if指令

    概述 在Angular JS中,可以使用ng-if指令来控制元素是否存在。 实现细节 ng-if标签通过监控绑定的...

  • ng-repeat

    ng-click 事件ng-hide 隐藏 1.angular和javascript 不互通(函数不互通,...

  • 面试题

    vue和angular的区别? ng-if和ng-show的区别? 闭包 DOM操作 性能优化 sessionSt...

  • angular控制器和指令

    Angular Angular vs jQuery 提高了dom操作的效率 不推崇dom操作 angular.el...

  • 2018-12-11

    首先浏览器载入HTML,然后解析成DOM,之后载入angular.js 脚本。之后angularJS寻找ng-ap...

  • ng-app

    ng-app 确认angular.js的管理边界angular.js比较霸道,一旦确认了ng-app,ng-app...

  • angular.js易出错的地方

    angular.js易出错的地方 必须声明ng-app 和ng-controller、

网友评论

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

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