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

Question

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

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

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

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

在该指令中我有类似的内容，

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

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

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

我需要做什么来确保当我们再次编译 HTML 时前一页上的监视被销毁。

Answer 1

每次 $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, function (html) {
        if (newScope) {
            newScope.$destroy();
        };
        element.empty();
        if (html) {
            element.html(html);
            newScope = scope.$new()
            $compile(element.contents())(newScope);
        };
    });
}

这会创建并销毁更改的子范围。