Question

我有一个部分问题，第一次导航到该页面几乎立即呈现，但是如果离开该页面，有时候我回来它会显得很慢。它在大约140个项目的列表中包含ng-repeat。

例如：home（initialize） - ＆gt;法术（即时） - ＆gt; home - ＆gt;法术（慢）

为什么会发生这种情况，我该如何解决？

我已采取措施尝试改进：

在转发器中添加bind-once
在我的API中使用etags，这样我就无法获取每次加载部分时已经拥有的项目的完整列表。
添加跟踪到ng-repeat。

代码

<div ng-repeat="color in ::colors">
  <div>
    <span data-target="#{{$index + 'col'}}">
      <header>
        <label>{{color.name}}</label>
      </header>
    </span>
  </div>

  <ul id="{{$index + 'col'}}">
    <li ng-repeat="spell in ::spells track by spell.name"  
        ng-if="spell.color.name === color.name" 
        ng-dblclick="addToCharacter(spell, 'spell')" 
        on-long-press="addToCharacter(spell, 'spell')">

      <div>
        <label ng-hide="isSpell(spell)">Ability</label>
        <label ng-show="isSpell(spell)">{{spell.cost}} mana</label>
      </div>

      <div data-target="#{{$index + 'sp'}}">
        <a>{{spell.name}}</a>
      </div>

      <div id="{{$index + 'sp'}}">
        {{spell.description}}
      </div>
    </li>
  </ul>

</div>

IsSpell（）

$rootScope.isSpell = function (spell) {
    return spell.type != null && spell.cost != null;
};

Answer 1

我实现了一个小机制，只在需要时加载项目，因此页面会立即加载，当用户点击某个类别（动画）时，它会加载所需的项目。这一切都非常顺利，我很满意。

查看第一个div（颜色）和li

上的ng-if

<div ng-repeat="color in ::colors" ng-init="loadItems = false" ng-click="loadItems = true">
  <div>
    <span data-target="#{{$index + 'col'}}">
      <header>
        <label>{{color.name}}</label>
      </header>
    </span>
  </div>

  <ul id="{{$index + 'col'}}">
    <li ng-repeat="spell in ::spells track by spell.name"  
        ng-if="(spell.color.name === color.name) && (loadItems = true)" 
        ng-dblclick="addToCharacter(spell, 'spell')" 
        on-long-press="addToCharacter(spell, 'spell')">

      <div>
        <label ng-hide="isSpell(spell)">Ability</label>
        <label ng-show="isSpell(spell)">{{spell.cost}} mana</label>
      </div>

      <div data-target="#{{$index + 'sp'}}">
        <a>{{spell.name}}</a>
      </div>

      <div id="{{$index + 'sp'}}">
        {{spell.description}}
      </div>
    </li>
  </ul>

</div>

慢页面渲染

1 个答案: