Question

我的ng-repeat需要3.5秒才能加载850项：

<ol class="tasks">
    <li class="task-item"
        ng-class="{completed: task.isCompleted}"
        ng-repeat="task in (filteredTasks = (tasks | filter: search | orderBy:'order' | limitTo:1250))"
        data-order="{{task.order}}"
            data-id="{{::task.id}}">
        <div class="drag-handle color-1 " data-original-title=" "></div>
        <div class="title-container">
            <a class="title-link" ng-click="showTaskDetails(task)" ng-bind="task.title">
            </a>
        </div>


        <div class="tree" ng-class="tree(task)"></div>

        <div class="check" ng-class="check(task)" ng-click="setCheck(task)"></div>

        <div class="actions">
            <a ng-click="setBucket(task, 1)" ng-class="{selected: task.bucketId === 1}" translate-once="MAIN_TOGGLEBUCKET_TODAY">T</a>
            <a ng-click="setBucket(task, 2)" ng-class="{selected: task.bucketId === 2}" translate-once="MAIN_TOGGLEBUCKET_TOMORROW">W</a>
            <a ng-click="setBucket(task, 3)" ng-class="{selected: task.bucketId === 3}" translate-once="MAIN_TOGGLEBUCKET_FOREST">F</a>
            <a ng-click="setBucket(task, 4)" ng-class="{selected: task.bucketId === 4}" translate-once="MAIN_TOGGLEBUCKET_GREENHOUSE">G</a>
        </div>
    </li>
</ol>

我尝试了不同的改进。我和bindonce库一起玩，直到我意识到它是本地添加到Angular 1.3。我开始使用translate-once从已翻译的文本中删除观察者。加载850件物品时，我仍然感觉很慢。有没有办法删除大多数观察者并按ng重复行手动重新绘制UI（当我检测到更改时）？

Answer 1

如果不需要一次显示所有内容，则可以加载50 x 50。

<ol class="tasks" ng-init="lmt = 50">
 <li class="task-item"
    ng-class="{completed: task.isCompleted}"
    ng-repeat="task in (filteredTasks = (tasks | filter: search | orderBy:'order' | limitTo:lmt))"
    data-order="{{task.order}}"
        data-id="{{::task.id}}">
  ....
</li>
<li>
  <button class="btn-block btn btn-primary" ng-click="lmt=lmt+50">MORE.....</button>
</li>

Answer 2

有没有办法删除大多数观察者并按照ng-repeat行手动重新绘制UI（当我检测到更改时）？

我会在这里进行一些无耻的自我推销，并建议你放弃angular-bind-notifier。

要减少观察者的数量，您将大致采取以下措施：

使用::语法将所有绑定转换为一次性绑定。
设置通知程序以观看单个属性，在控制器A的情况下（通过$scope或this公开）。
根据key的使用情况，在绑定中的::之间传递$on/$broadcast，为其提供半静态/半动态绑定。
当您想要修改绑定时手动更改所述属性，或者将其留给外部世界来操作属性并自动刷新绑定。

它看起来像这样：

// In your controller/directive/whatever.
$scope.localisation = 'en';

// In your view
<ol class="tasks" bind-notifier="{ locale: localisation }">
  <li>
    <span>{{:locale:boundValue}}</span>
    <span ng-bind=":locale:boundValueTwo"></span>
    <!-- etc. etc. -->
  </li>
</ol>

我会说这个;我的印象是原始的角度翻译translate指令有一种内置的方式，当观察者变得“陈旧”时取消注册观察者，但也许情况并非如此。

由于通知人指令仍处于早期阶段，您的里程可能会有所不同。

Angular slow ng-repeat：有没有办法手动刷新单个项目

2 个答案: