AngularJS - 1 带有 ng-if 语句或两个指令的指令？答案

【问题标题】：AngularJS - 1 Directive with ng-if statements or two directives?AngularJS - 1 带有 ng-if 语句或两个指令的指令？
【发布时间】：2016-07-25 08:43:39
【问题描述】：

关于 Angular JS 性能的快速问题。

我有一个 ng-repeat 列出大量搜索结果。我使用指令/模板来提取每个搜索项。

是使用包含两个指令的 ng-if 语句还是使用一个指令并在其中包含多个 ng-if 语句并使用表达式或语句更好。

例如包含两个指令的 Ng-if 语句：

<div ng-repeat>
    <directive-1 ng-if="this"></directive-1>
    <directive-2 ng-if="that"></directive-2>
</div>

或

<div ng-repeat>
   <directive-1></directive-1>
</div>

在directive-1中你有...

<img src="1" ng-if="this">
<img src="2" ng-if="that">
<span>{{title || title2}}</span>
etc...

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-ng-repeat angular-ng-if

【解决方案1】：

什么是 ng-if？它是指令 (1)，具有隔离范围 (2)，删除或附加 DOM(3)。

这是什么意思？

Ng-if 需要时间来初始化。（不多）
Ng-if 创建新的隔离作用域。（不多）
Ng-if 使用 DOM 操作。（可能非常昂贵的操作）

因此，与 DOM 相关的性能的主要问题。加速 ng-if 的最佳方法是减少 dom 操作。

另外，尽量避免将 ng-if 与 ng-repeat 一起使用。你当然可以这样做，但要小心。

【讨论】：