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

Question

我有一个 AngularJS 应用程序，用于动态构建页面（从服务器检索 XML 并通过读取 XML 构建页面或表单）用于 XML 我们必须建立几个页面，所有页面都相互关联，可以通过 'Next' 、 'Previous' 按钮来否定。

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

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

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

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

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

现在在每个页面中我都有许多输入控件（或指令），并且每个控件都有很少的绑定，这增加了观察者的数量。

我注意到，如果我 ~~negative~~ 导航到另一个页面，之前页面上的观察者不会被销毁，直到我的动态指令从范围中删除。

当我们再次编译 HTML.

时，我需要做什么来确保上一页的 watches 被销毁

Answer 1

每次 $compile 服务 link 向范围添加内容时，它都会添加观察者。这就是为什么 ng-repeat、ng-switch、ng-view、ng-include 和 ng-if 等指令都会创建新的子作用域。他们 link 到子作用域并在销毁已编译的 DOM 时销毁该作用域。使用 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);
        };
    });
}

这会根据更改创建和销毁子作用域。

Answer 2

您可以通过为监视分配变量来取消监视任何内容：

var dynamicWatcher = scope.$watch(attrs.myDynamic, function (html) {
    element.html(html);
    $compile(element.contents())(scope);

    dynamicWatcher(); // unwatch
});

请参阅 the documentation 在 return 类型：

Returns function()
Returns a deregistration function for this listener.

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

AngularJS Remove old $watchers when re-compiling dynamic html

angularjs

angular-directive