AngularJS 在重新编译动态 html 时删除旧的 $watchers [英] AngularJS Remove old $watchers when re-compiling dynamic html

问题描述

我有一个 AngularJS 应用程序，用于动态构建页面(从服务器检索 XML 并通过读取该 XML 构建页面或表单)为 XML 我们必须构建几个页面，所有页面都彼此相关，并且可以通过下一个"、上一个"按钮.

为了实现我们有类似的东西，

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

这里的 myDynamic 是指令，它处理生成的 html，当我们必须导航到另一个页面时，我们为该页面生成新的 HTML 并将其分配给 myController.dynamicHtml

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

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

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

我注意到，如果我 negative 导航到另一个页面，之前页面上的观察者不会被破坏，直到 my-dynamic 指令从范围中删除.

当我们再次编译 HTML 时，我需要做的是确保上一页上的监视被销毁.

解决方案

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

link: function postLink(scope, element, attrs) {var newScope;scope.$watch(attrs.myDynamic, 函数 (html) {如果(新范围){newScope.$destroy();};element.empty();如果(html){element.html(html);newScope = scope.$new()$compile(element.contents())(newScope);};});}

这会在更改时创建和销毁子作用域.

I have an AngularJS application that used to Build Pages dynamically (retrieve an XML from Server and by reading that XML building pages or forms) for an XML we have to build few pages all are related with each other and can be negative via 'Next' , 'Previous' buttons.

to implement that we have something like,

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

herer myDynamic is directive, which deals with generated html and when we have to navigate to another page we generate new HTML for that page and assign it tomyController.dynamicHtml

and in that Directive I have something like this,

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

Now in each page I have number of input controls(or directives), and each have few bindings that that adds to number of watchers.

I have notice that if I negative navigate, to another page, watchers on previous pages not getting destroyed, until my-dynamic directive gets removed from scope.

What I need to do to make sure that watches on previous page gets destroyed when we again compile the HTML.

解决方案

Everytime the $compile service links something to a scope, it adds watchers. That is why directives such as ng-repeat, ng-switch, ng-view, ng-include and ng-if all create new child scopes. They link to the child scope and destroy that scope when destroying the compiled DOM. Use scope.$new and scope.$destroy.

link: function postLink(scope, element, 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);
        };
    });
}

This creates and destroys a child scope on changes.

这篇关于AngularJS 在重新编译动态 html 时删除旧的 $watchers的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！