javascript - 我怎样才能摆脱 AngularJS 中所有重复的 watch ？

Question

我有created a simple TODO app使用 AngularJS。

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

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

基本上，每一行(在 ng-repeat 下)都有一个不可见的输入，我用它的可见性来玩:

<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>

一切正常

但我看到了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 都创建了一个观察者，你无法做任何事情来避免使用 native 指令:你应该期望每一行至少有两个观察者案例。

移除观察者(所有观察者)的唯一方法是创建一个自定义指令:

• 隐藏标签并在双击时显示输入
• 显示标签并在按下 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>
...