ng重复包括:最佳性能方式

Question

我面临着Angular（Ionic）的性能问题，我想知道哪种是解决此问题的最绩效的方法。

我从一个我的应用中显示的对象列表：

  $scope.objectList = [
    {
       id: 123456,
       name: "abcdefg",
       state: [1|2|3|4|5|6|7|8...],
       ....
    },
    ....
  ];

列表永远不会超过20-25个对象。

问题是列表中的元素尽管具有相同的类型，但必须以完全不同的方式显示它们。我有一个对象可以在每个物体中的模板。

我正在使用这种方式来显示列表。列表不会更改，因此我可以使用一种绑定。

<div ng-repeat="obj in ::objectList track by obj.id">
   ....    
</div>

在此NG重复中，我必须包括每个对象的演示模板，该模板会根据对象状态而更改。

我尝试了不同的解决方案，但找不到可以改善渲染性能的解决方案。

例如，我已经尝试过，但是我不确定将函数绑定到ng-Include是否表现非常出色。

html：

<div ng-repeat="obj in ::objects track by obj.id">
    <div ng-include="getTemplateToInclude(obj)"></div>
</div>

JS：

$scope.getTemplateToInclude = function(obj){
    if(obj.state === 1){
        return "tmpls/template-a.html";
    }else if(obj.state === 2){
        return "tmpls/template-b.html";
    }
    ....
};

有什么建议如何解决这个问题？whicch将是在同一列表中包含此不同模板的最佳方法？

我必须使用一种方式绑定符号（：:)在随附的模板中，还是与NG重复中使用的符号一样？

预先感谢

Answer 1

我没有使用单向绑定模板语法（：:)，所以我不会对此说话。但是，根据您的评论和原始问题，我认为最好的方法将是这些行：

• 创建一个将处理您的中继器项目
的单个项目渲染器模板
• 继续在中继器中使用track by语法，以便为 recycle 项目渲染器

• 基于项目的 type ，使用ng-show＆amp;的组合 ng-hide以显示嵌套在模板中的正确儿童。

  <!-- item renderer template.html -->
  <div>
     <div ng-show="item.type == 'foo'"></div> 
     <div ng-show="item.type == 'bar'"></div> 
     <div ng-show="item.type == 'baz'"></div>
  </div>
  

在中继器中创建一个与track by结合的单个模板将重复使用DOM元素，否定了将它们从DOM提取，然后插入新的元素。

使用ng-show或ng-hide与ng-if相同的想法与上面相同。您正在切换DOM元素的可见性，而不是破坏/创建它们。

我之所以争论的原因是，几乎所有与性能相关的调整，重复使用或回收对象通常都比销毁更快，然后再重新创建新对象。JavaScript当然是正确的，尽管我还没有在DOM操纵中测试该理论，但我敢打赌这也是真的。我正在做一个有根据的猜测，但是由于您使用的是离子框架，这也应该受益于移动性能，

只要记住，鉴于您可能显示的内容以及数据行的各种排列，您可能只会看到边际性能增长。根据模板内部的绑定数量，您可能会达到Angular Digest循环完成的性能罚款与回收DOM元素的性能相同。