3

我有一种情况，我从后端接收 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指令实例化的手表？

4

1 回答 1

0

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

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 中删除元素。您只需隐藏它们。所以观察者留下来。戳这里

其余元素的屏幕截图，您的代码将无法正确删除这些元素： 在此处输入图像描述

于 2013-09-18T17:52:13.413 回答