Javascript 我怎样才能摆脱AngularJS中所有重复的手表？

我和AngularJS有关系

我这里有一张待办事项清单。我可以删除，设置为已完成，并添加新的

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

基本上，每一行（在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>

好的

但我在应用程序中看到了观察者

所以我增强了它，以字符串的方式显示独特的项目

（我所做的只是补充）：

Array.prototype.unique=函数（a）{
返回函数（）{returnthis.filter（a）}
}（函数（a，b，c）{返回c.indexOf（a，b+1）<0}）
log（getWatchers（）.unique（）.length）；
log（getWatchers（）.unique（）.map（函数（a）{returna.exp；}））；
)*

这并不重要。

重要的是它有许多重复的观察者

看看结果：

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

---

我所做的只是通过函数的某个值使用ng show和hide。

事实上，我认为没有任何重复：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:

。。。
{{todo}}
...

您是否尝试过绑定一次？我们在应用程序中做到了这一点，并通过新的

：…

方式将我们的观察者减少了30%。但这只适用于不必要的重新绑定信息。比如一个头衔。我用下面的全局计数器进行了尝试，当我更改totos时，它们停止更新。使用ng if而不是ng show怎么样？因此，仅当IsTheEdition返回true时才呈现元素。此时，无论是否显示，每次都会进行渲染。我知道这并不能回答这个问题。那是一块手表，在每一个ng节目中都会出现，不是吗？我相信是的，如果你是说ngrepeat…嗨。但这将允许同时进行多个编辑。为此，您可以添加一个包装器指令，该指令在双击时公开api以隐藏所有输入。这里有一个例子：谢谢。这让我不禁要问，什么时候应该使用

ng if

（我知道它完全从dom中删除了它），但它仍然使用了watchers（对吧？）——但它需要成本，而且不是免费的。在我的情况下，您会怎么做？

ng if

和

ng show

之间的唯一区别是第一个从DOM中删除元素，而第二个隐藏它（在表单中，您可能更喜欢删除输入而不是隐藏它）。两者的成本相同：一个观察者。Angular的双向数据绑定非常惊人，但也非常昂贵，我尽可能使用自定义指令来避免这种情况，而您的情况就是其中之一。不过，这里和那里的观察家并没有那么糟糕，他们在保存代码方面帮了你很多。谢谢你的回复。根据你的回答，我对解决方案做了一些修改。但在做了这些之后，我想：“嘿，我正在把这个NG应用程序变成NG-JQUERY应用程序——我真的想要吗？”你明白我的意思吗？此外，我并不关心这里或那里的观察者，但正如你所看到的，只要todos项目在增长——观察者也在增长。。。

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());
        }
      });
    }
  }
});

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