Question

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

如果直接在指令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中取出它并将它移到指令声明之外以便放置{ {1}}那里

这种情况的最佳方法是什么？通过这种或那种方式做出任何性能影响吗？或者它是一样的吗？考虑一下列表中元素的数量可能会非常大。

Answer 1

它们完全相同，但您可以使用one-time binding提高性能，但仅当element在运行时没有更改时（例如，让我们说它具有属性{{ 1}}，您的name就像someFunction）。 Angular在返回值时停止观察此函数，并且将删除监视。使用此解决方案有两个先决条件：

列表中的元素属性不会更改（如果您在return element.name === 'John'中依赖它们），例如，如果您依赖someFunction属性名称，则不得更改，因为name上的观察者是请注意。
当列表更改或其元素属性发生更改时，您将重新加载所有列表（例如，如果您知道发生了更改，则会再次从服务器获取它）

你得到了什么？在someFunction上绘制my-directive之后没有监视，当某些内容发生变化时，新引用绑定到ng-if（例如，它来自服务器）并且所有内容都将被重绘，list将再次运行，何时将变为稳定（函数返回值），然后将被解除绑定。看起来怎么样？像这样：

ng-if

表达前的两个冒号。但请注意，通过一次性绑定很容易搞砸 - 您需要确保测试代码足以确保其有效。

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

1 个答案: