Question

我与AngularJS有created a simple TODO app。

所以我这里有一个TODO列表。我可以删除，设置为已完成，然后添加新的。

我也可以通过双击粗体文本来编辑标题。而现在 - 将出现一个文本输入：

基本上，每一行（在ng-repeat下）都有一个看不见的输入，我用它的visibilkity玩：

<li ng-repeat="todo in vm.todos....."  ...>

    <div ng-hide="vm.isTheEdited(todo)"> //this is "read" mode
         ....show checkbox + Label + Delete button
    </div>

    <input  ... show="vm.isTheEdited(todo)"....  /> // this is the "edit" mode

  </li>

一切OK

但我在App中看到this code which counts观察者。

所以我增强了它以字符串的方式显示唯一的项目。

（我所做的只是添加）：

Array.prototype.unique = function(a){
    return function(){ return this.filter(a) }
}(function(a,b,c){ return c.indexOf(a,b+1) < 0 })

console.log(getWatchers().unique().length);
console.log(getWatchers().unique().map(function (a){return a.exp;}));
)*

这并不重要。

重要的是它有很多重复观察者!!!

查看结果：

问题为什么我有这么多的重复条目，我怎样才能减少观察者的数量？（并消除重复）

我所做的就是使用ng-show并通过一些函数值隐藏。

Answer 1

事实上，我认为没有任何重复：ngShow和ngHide创建一个观察者，你不能做任何事情来避免使用本机指令：你应该期望至少两个在这种情况下，每行的观察者。

删除观察者（所有人）的唯一方法是创建一个自定义指令：

隐藏标签并双击显示输入
显示标签并在按Enter键时隐藏输入

示例：

module.directive('myClick', function() {
  return {
    link: function(scope, element) {
      var span = element.find('span'),
          input = element.find('input');

      input.hide();

      span.on('dblclick', function() {
        if (span.is(':visible')) {
          span.hide();
          input.show();
          input.val(span.text());
        }
      });

      input.on('keypress', function(e) {
        if (e.which === 13) {
          input.hide();
          span.show();
          span.text(input.val());
        }
      });
    }
  }
});

HTML：

...
<div ng-repeat="todo in vm.todos" my-click>
  <span>{{todo}}</span><input>
</div>
...

如何摆脱AngularJS中的所有重复手表？

1 个答案: