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);
    });
}

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

我注意到如果我否定导航到另一个页面，之前页面上的观察者不会被破坏，直到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);
        };
    });
}

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

Answer 2

您可以通过为手表指定变量来取消监视任何内容：

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

    dynamicWatcher(); // unwatch
});

请参阅返回类型的the documentation：

返回   函数（）
  返回此侦听器的注销函数。

AngularJS在重新编译动态html

2 个答案: