Angularjs 通过使用div包装或在指令标记内过滤指令

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

注意：每个指令上的起始

元素可以修改为相同的行为，因此我将基本上从指令的html中删除该元素，并将其移到指令声明之外，以便将

ng if

放在那里

---

对于这种情况，最好的方法是什么？这样或那样做是否会影响性能？或者是同一件事？考虑列表中元素的数量可能会很大。

它们是完全相同的，但是可以提高性能，但是只有当代码>元素< /代码>在运行时不会改变时。（例如，假设它具有属性

name

，而您的

someFunction

类似于

return element.name==='John'

）。Angular在返回值时停止观察此函数，手表将被删除。使用此解决方案有两个先决条件：

列表中的元素属性不会更改（如果您在

someFunction

中依赖它们），例如，如果您依赖

name

属性名称，则属性名称不得更改，因为

someFunction

上的观察者是可用的

当列表更改或其元素属性更改时，您将重新加载所有列表（例如，如果知道发生了更改，您将再次从服务器获取该列表）

你得到了什么？在

我的指令

s被绘制在

ng如果

s上之后，就没有手表了，当某些内容发生变化时，新的引用被绑定到

列表

（例如，它来自服务器），所有内容都将被重新绘制，

ng如果

s将再次运行并且何时变得稳定（函数返回值）然后将被解除绑定。它是什么样子的？如下所示：

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

---

表达式前有两个冒号。但请注意，使用一次性绑定很容易出错-您需要确保对代码进行足够的测试，以确保其正常工作。

如果列表很大……视图中的观察者越少越好。由于ng if创建了观察者和子作用域，因此最好将条件卸载到另一个打开的指令ly必须评估

someFunction

一次。有关这些指令的更多详细信息将有所帮助