Question

我在元素上使用ng-repeat来显示结果集。在每一行上都有一个封装操作按钮的指令，根据一些业务规则应该可以看到这些指令。这是该指令的观点：

<div class="ngCellText grid-actions-cell" ng-class="col.colIndex()">
<span ng-cell-text ng-if="!saving">
    <a class="btn grid-button grid-edit-row btn-primary" href="dm/requests/{{model.id}}/edit" ng-if="(model.status.code === 'UNDE' && userInfo.currentUser === model.assignedTo)  || model.status.code === 'DRAF'" data-tooltip="Edit"><i class="fa fa-pencil"></i></a>
    <a class="btn grid-button  grid-view-row btn-primary" href="dm/requests/{{model.id}}" ng-if="canView()" data-tooltip="View"><i class="fa fa-eye"></i></a>
    <a class="btn grid-button  grid-cancel-row btn-danger" ng-if="model.status.code === 'NEW' || (model.status.code === 'UNDE' && userInfo.currentUser === model.assignedTo)" ng-click="cancelRequest()" data-tooltip="Cancel"><i class="fa fa-ban"></i></a>
    <a class="btn grid-button  grid-delete-row btn-danger" ng-if="model.status.code === 'DRAF'" ng-click="deleteRequest()"><i class="fa fa-trash-o" data-tooltip="Delete"></i></a>
    <a class="btn grid-button  grid-reopen-row btn-primary" ng-if="model.status.code === 'CANC' " ng-click="reopenRequest()"><i class="fa fa-undo" data-tooltip="Reopen"></i></a>
    <a class="btn grid-button  grid-reopen-row btn-primary" href="workflow/{{model.id}}/group" ng-if="model.status.code === 'APPR'"><i class="fa fa-flask" data-tooltip="Define Workflow"></i></a>
    <a class="btn grid-button  grid-reopen-row btn-primary" href="workflow/{{model.id}}/edit" ng-if="model.status.code === 'INPR'"><i class="fa fa-flask" data-tooltip="Define Workflow"></i></a>
    <a class="btn grid-button  grid-reopen-row btn-primary" href="dm/requests/{{model.id}}/history"><i class="fa fa-clock-o" data-tooltip="History"></i></a>
</span>
<span ng-cell-text ng-if="saving">
    <i class="fa fa-spinner fa-spin fa-lg"></i>&nbsp;
</span>

每行产生24个手表，最终可能对性能产生影响。对于如此简单的指令，我认为手表数量很多。看看这个观点，是否有更好 - 更有效的方法来实现这一目标？

Answer 1

如果页面中显示的大部分数据一旦呈现，就是不可变的，因此您不应该继续观察更改，请尝试使用bindonce库来提高性能。

所以，而不是写

<ul>
    <li ng-repeat="person in Persons">
        <a ng-href="#/people/{{person.id}}"><img ng-src="{{person.imageUrl}}"></a>
        <a ng-href="#/people/{{person.id}}"><span ng-bind="person.name"></span></a>
        <p ng-class="{'cycled':person.generated}" ng-bind-html-unsafe="person.description"></p>
    </li>
</ul>

使用：

<ul>
    <li bindonce ng-repeat="person in Persons">
        <a bo-href="'#/people/' + person.id"><img bo-src="person.imageUrl"></a>
        <a bo-href="'#/people/' + person.id" bo-text="person.name"></a>
        <p bo-class="{'cycled':person.generated}" bo-html="person.description"></p>
    </li>
</ul>

角度：页面上有太多$ watch

1 个答案: