通过使用 div 包装器或在指令标记内筛选指令

Question

当在 ngRepeat 循环内的页面中显示的 2 个指令之间进行选择时，我正在尝试采用最佳方法并避免在我的 AngularJS 应用程序中不必要的渲染/处理时间，想知道哪种是最好的方法：

如果通过直接在指令 html 元素中设置ng-if，例如：

<div ng-repeat="element in list"> 
<my-directive-a ng-if="someFunction(element)"></my-directive-a>
<my-directive-b ng-if="!someFunction(element)"></my-directive-b>
</div>

或者从指令的模板中移出第一个<div>，并将其用作每个指令的包装器。例如：

<div ng-repeat="element in list"> 
<div ng-if="someFunction(element)">
<my-directive-a></my-directive-a>
</div>
<div ng-if="!someFunction(element)">
<my-directive-b></my-directive-b>
</div>
</div>

注意：每个指令上的起始<div>元素可以修改为相同的行为，所以我基本上会将其从指令的html中删除并将其移动到指令声明之外，以便将ng-if放置在那里

在这种情况下，最好的方法是什么？以一种或另一种方式执行此操作是否对性能有任何影响？还是只是一回事？考虑到列表中的元素数量可能会变得非常大。

Answer 1

它们完全相同，但您可以使用一次性绑定来提高性能，但前提是element在运行时不会更改(例如，假设它具有属性name，并且您的someFunction类似于return element.name === 'John')。Angular 只是在返回值时停止观察此函数，手表将被删除。使用此解决方案有两个先决条件：

1. 列表中的元素属性不会更改(如果您在someFunction中依赖它们)，例如，如果您依赖name属性名称不得更改，因为观察者在someFunction是可用的。
当列表更改
2. 或其元素属性更改时，将重新加载所有列表(例如，如果您知道发生了更改，则再次从服务器获取它)

你从中得到了什么？在ng-ifs 上绘制my-directives 后没有手表，当某些内容发生变化时，新的引用绑定到list(例如，它来自服务器)并且所有内容都将被重绘，ng-ifs 将再次运行，何时变得稳定(函数返回值)然后将被取消绑定。它是什么样子的？喜欢这个：

<div ng-repeat="element in list"> 
<div ng-if="::(someFunction(element))">
<my-directive-a></my-directive-a>
</div>
<div ng-if="::(!someFunction(element))">
<my-directive-b></my-directive-b>
</div>
</div>

表达式前的两个冒号。但请注意，使用一次性绑定很容易搞砸 - 您需要确保对代码进行了足够的测试以确保它有效。