AngularJS条件绑定一次?

时间:2015-03-24 00:59:34

标签: javascript angularjs bindonce

我目前正在开发一个需要显示任意尺寸的可编辑表格的项目。我正在使用AngularJS,但由于表格会变得非常大,我希望如果我不使用某种形式的bind-once,事情就会变慢。问题是,据我所知,bind-once是绝对的 - 我希望它实际上保留或至少恢复当前正在编辑的行的所有观察者。

以下是我目前正在做这件事的基本想法。

<tr ng-repeat="row in rows track by key" hackonce>
  <td ng-repeat="col in cols">
    <div ng-click="editStuff()">{{contents}}

directive('hackonce', function() etc
  link: function(scope, elem, attrs) {
    if (!scope.row.editing)
       setTimeout(function(){ scope.$destroy() }, 0)
  }

我正在从各种标识符生成该行的字符串键。当项目被标记为要编辑时,控制器将其切换为副本并更改其密钥以包括最终将成为事务锁定数据的内容。这会触发ng-repeat中的替换,并且下次使用替换的行数据构造tr时,范围将保持不变并在编辑内容时更新。

不知何故,它确实有效(到目前为止)。它让我从一个小名单上的500多名观察者下降到100以下,剩下的主要是顶级控制,所以我希望它能够很好地扩展。它似乎也保留并正确清理ng-click监听器等,即使范围已经消失。

然而,这就是我在短暂打字时所犯的那种黑客行为,我觉得它可能会让那些比我更了解这个图书馆的理智人士感到呕吐。我想知道是否有更清洁和/或更安全的方法来做同样的事情。我正在寻找的是有条件地绑定一次的更好方法,或者让一个元素/范围以其自身及其所有子节点为基础,根据一些暴露​​的标记跳过它的$ digest。

有没有办法做到这一点,不涉及将切肉刀带到范围或手动重新附加我希望避免使用Angular的所有jQuery垃圾?

1 个答案:

答案 0 :(得分:1)

如果没有更多的实现细节,这有点困难,但我假设您正在使用某种机制来显示/隐藏每行的只读/可编辑元素?如果您使用ng-if来执行此操作,它会将元素附加到DOM并在条件为true时重新绑定,并在false时分离。

所以,比如:

<td ng-repeat="col in cols">
  <span ng-if="!isEditing(row)">Read-only stuff here</span>
  <span ng-if="isEditing(row)">Editable stuff here.</span>
</td>

我在这里创建了一个非常简单的示例: http://plnkr.co/edit/SkdgTuK5UvEEsZmzWat6?p=preview