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

Question

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

实现我们有类似的东西,

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

herer 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时销毁该范围.使用范围.$ 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);
        };
    });
}

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