删除了ng-show泄漏$ watch

Question

我遇到的情况是，我从后端接收json数据，然后使用具有少量ng-show指令的模板进行渲染。

<div>
    <span ng-show="config.displayMode == 'A'" class="ng-binding">${A}</span>
    <span ng-show="config.displayMode == 'B'" class="ng-binding">${B}</span>
    <span ng-show="config.displayMode == 'C'" class="ng-binding">${C}</span>
</div>

当我收到下一组数据时，由于模板的工作方式，它只是删除当前元素并呈现新元素。

这一切都正常，似乎表现不错，但是当我看到Batarang性能工具时，我发现每次删除元素时我都会泄漏手表。这个页面往往长时间保持打开状态，随着时间的推移，内存占用和消化时间呈线性增长，我想避免这种情况。

编辑使用jQuery的.empty()函数删除元素

每个请求我创建了一个plunkr。这个例子是超级设计的，但基本上它每次在框中键入内容时都会应用ng-show的元素。如果该框已清空，则删除ng-show个元素。使用batarang可以看到手表仍然出现在性能标签上。

我的问题有没有办法清除ng-show指令实例化的手表？

Answer 1

如果我理解正确，那可能会解决您的问题：

app.directive('myDirective', function($compile) {
  return {
    restrict: 'A',
    scope: {
      myDirective: '='  
    },
    link: function($scope, elem, attr, ctrl) {
      $scope.$watch('myDirective', function(){
        if($scope.myDirective.length > 5){
          elem.append("<div class='second'>Length is greater than 5</div>")
        } else {
          elem.empty();
        }
      });
    }
  };
});

代码中的问题是，你并没有真正删除dom中的元素。你只需隐藏它们。所以观察者留下来了。 Plunker here

---

其余元素的屏幕截图，不会使用您的代码正确删除：