javascript - AngularJS:如何优化嵌套指令

Question

我有以下 Angular 指令 item 模板。项目在其范围内包含属性 type。基于这种类型，我需要呈现不同的模板。

<item ng-repeat="myItem in items track by myItem.id">
  <div ng-switch="::myItem.type">
    <div ng-switch-when="type1">
      Some complex html with a couple of ng-if and ng-include
    </div>
    <div ng-switch-when="type2">
      Some complex html with a couple of ng-if and ng-include
    </div>
    <div ng-switch-when="type3">
      Some complex html with a couple of ng-if and ng-include
    </div>
    <div ng-switch-when="type4">
      Some complex html with a couple of ng-if and ng-include
    </div>
    <div ng-switch-when="type5">
      Some complex html with a couple of ng-if and ng-include
    </div>
    <div ng-switch-when="type6">
      Some complex html with a couple of ng-if and ng-include
    </div>
  </div>
</item>

我想重写独立指令中的每个 ng-switch-when，并提高 ng-repeat 的性能(现在它必须为每个项目制作 ng-include 和设置 innerHTML即使对于包含 50 个项目的列表，这对浏览器来说也是一项繁重的操作。

所以我的问题是:

• 如何将 ng-switch-when 改造成独立指令
• 在这种情况下如何提高 ng-repeat 的性能

更新:

• 与AngularJS: Parse HTML events in timeline相关的问题这是我想优化当前结构的原因之一。
• 添加了错过的 track by
• 需要大量的 ng-if 和 ng-include 语句，因为每个 widget 都由 ng-switch- 表示when 有它自己的逻辑，将根据 myItem 的一些其他参数呈现。

问题还在于我需要通过某些用户操作完全重建此项目列表。

顺便说一句:

在 react 中我可以做这样的事情:

render: function() {
  //it's for two items, but can be extended for any number of templates
  var child = this.props.type === 'Type A' ? <TemplateA /> : <TemplateB />;

  return child;
}

Answer 1

我不知道您为什么需要大量 IF 语句，以及为什么要为此使用指令，但我可以为您提供有关 ng-repeat 的建议。

在 ng-repeat 中使用 track by $index 来提高性能。并查看有关 Angular 性能的文章，如下所示:11 Tips to Improve AngularJS Performance

此外，如果您的界面有很多需要渲染的元素，也许您应该看看渲染速度更快的 ReactJS。