AngularJS在重新编译动态html时删除旧的$watchers

发布时间：2020-12-17 17:32:54 所属栏目：安全来源：网络整理

导读：我有一个AngularJS应用程序,用于动态构建页面(从服务器检索 XML并通过读取 XML构建页面或表单)获取XML,我们必须构建几个页面,所有页面都相互关联,并且可以通过“下一步”进行否定,’上一页’按钮. 实现我们有类似的东西, div form name="myController.mainFo

我有一个AngularJS应用程序,用于动态构建页面(从服务器检索 XML并通过读取 XML构建页面或表单)获取XML,我们必须构建几个页面,所有页面都相互关联,并且可以通过“下一步”进行否定,’上一页’按钮.

实现我们有类似的东西,

<div>
   <form name="myController.mainForm" novalidate>
      <div my-dynamic="myController.dynamicHtml"></div>
   </form>
</div>

herer myDynamic是指令,它处理生成的html,当我们必须导航到另一个页面时,我们为该页面生成新的HTML并为其分配tomyController.dynamicHtml

在那个指令中我有这样的东西,

link: function postLink(scope,element,attrs) {
    scope.$watch(attrs.myDynamic,function (html) {
        element.html(html);
        $compile(element.contents())(scope);
    });
}

现在,在每个页面中,我都有许多输入控件(或指令),每个都有很少的绑定,这会增加观察者的数量.

我注意到,如果我否定导航到另一个页面,之前页面上的观察者不会被破坏,直到我的动态指令从范围中删除.

当我们再次编译HTML时,我需要做的是确保前一页上的监视被破坏.

解决方法

每次$compile服务将某些内容链接到作用域时,它都会添加观察者.这就是为什么指令,如ng-repeat,ng-switch,ng-view,ng-include和ng-if都创建新的子范围.它们链接到子范围并在销毁编译的DOM时销毁该范围.使用 scope.$new和 scope.$destroy.

link: function postLink(scope,attrs) {
    var newScope;
    scope.$watch(attrs.myDynamic,function (html) {
        if (newScope) {
            newScope.$destroy();
        };
        element.empty();
        if (html) {
            element.html(html);
            newScope = scope.$new()
            $compile(element.contents())(newScope);
        };
    });
}

这会在更改时创建并销毁子范围.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!