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

我试图用最好的方法去避免不必要的渲染/处理时间在我的AngularJS应用程序中选择2个指令之间显示的页面内的页面ngRepeat循环，想知道哪个是最好的方法：使用div包装器或在指令标签内过滤指令

假设该指令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有

这种情况下最好的方法是什么？这样或那样做会有什么性能影响吗？或者它只是一样的东西？考虑一下列表中元素的数量可能会变得非常大。

来源

2017-04-14 Walter R

如果名单将大......鉴于越少越好观察家。由于NG-如果创建表和子作用域可能会更好过负载条件到另一个指令，只有评估'someFunction'一次。有关这些指令的更多细节将有所帮助 – charlietfl

他们是完全一样的，但可以提高性能与one-time binding，但只有当element在运行时不发生变化（例如，让我们说，它具有财产name，你的someFunction就像return element.name === 'John'）。当它返回值时，Angular停止观察这个函数，手表将被删除。有2个前提条件要使用此解决方案：

元素列表不会改变（如果你在someFunction依靠他们），例如，如果你依赖name属性名称不得更改，因为someFunction Watcher是性能备注可用。
当列表更改或它的元素属性改变，你重新加载所有列表（例如，您可以从服务器上获取它，如果你又知道发生了变化）

你这得到什么？有后my-directive没什么手表上ng-if的提请，当有新的变化，新的参考势必list（例如，它来自服务器），一切都会被重绘，ng-if旨意再次运行以及何时将变得稳定（函数返回值）然后将被解除绑定。它看起来像什么？像这样：

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

表达前的两个冒号。但请注意，一次性绑定很容易搞砸 - 您需要确保测试代码的次数足以确保它能够正常工作。

来源

2017-04-14 19:08:24

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

回答

相关问题