AngularJS:不使用dirPagination的自定义指令

Question

我正在使用AngularJS创建一个页面，其中包含一个产品列表，其中显示了诸如名称、价格、区域等信息。这有点像手风琴，标题中有名字，正文中有额外的信息。

由于可以显示大量这些项，所以我使用dirPagination (https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination)对这些项进行分页。我现在的标记是这样的：

<div class="custom-list" dir-paginate="asset in assets | itemsPerPage: 10 track by $index">
    <div class="custom-list-item" ng-class="{'tag-hover': isHoveredTag(asset)}">
        <div class="custom-list-item-heading" ng-click="toggleShowAssetDetails(asset)">
            <p class="col-lg-5">{{ asset.name }}</p>
            <div class="col-lg-offset-2 col-lg-3 rating">
                <rating value="asset.rating" />
            </div>
            <button ng-click="addAsset(asset)"><span class="glyphicon glyphicon-plus"></span></button>
            <div class="clearfix"></div>
        </div>
        <div class="custom-list-item-content" style="display: none" animate="shouldShowAssetDetails(asset)">
            ...
        </div>
    </div>
</div>

如您所见，我使用分页的方式非常标准，只需循环遍历数组中的项并显示每页10项。我还有一个指令名为“评级”，它查看项目中名为“评等”的值。这是一个1-5的数字，用来显示名字旁边的星级系统。该指令如下：

var rating = function ($compile) {
    return {
        restrict: "E",
        scope: {
            value: "="
        },
        link: function (scope, element, attrs) {
            scope.$watch(attrs.rating, function () {
                for (var i = 1; i <= 5; i++) {
                    if (i <= scope.value) {
                        var starElement = angular.element("<span class=\"icon icon-crown\"></span>");
                        $compile(starElement)(scope);
                        element.append(starElement);
                    } else {
                        var emptyStarElement = angular.element("<span class=\"icon-empty icon-crown\"></span>");
                        $compile(emptyStarElement)(scope);
                        element.append(emptyStarElement);
                    }
                }
            })            
        }
    }
}

这将查看该值，并根据评级值插入图标(例如，如果评级为2，指令将插入两个图标-冠图标跨度和3个图标-空图标冠图标跨度。

在我把分页包括进来之前，这件事做得很好。然而，现在它将只适用于前10项。当您更改页面时，评等不会更改，只是保留上一页中相同的图标，即使值不同。

我理解这是因为指令在开始时设置了所有内容，并且当您更改页面时它将不会运行，因为这些项没有重新加载，它们只是被显示并再次隐藏。但是指令是操作DOM，这样它就不会在页面更改时更新。

问题是我不知道怎么解决这个问题。我考虑更改指令，以查找分页当前页，但之后我无法访问当前列表项。

我希望得到任何帮助，以获得指令，以更新图标时，页面被改变。

更新这里有一个指向柱塞项目的链接，显示我遇到的问题：http://plnkr.co/edit/VSQ20eWCwVpaCoS7SeQq?p=preview

这是一个非常精简的版本，在我的应用程序部分，我有一个问题。虽然我保留了CSS类结构，但没有包含样式。为了简化柱塞项目，我还更改了图标以使用引导图标。

然而，功能是相同的。如果你从第一页到第二页，注意星星是如何保持不变的，尽管资产评级值是不同的。但是，如果您转到第3页，然后返回到第2或第1页，它们将发生更改。之所以会发生这种情况，是因为第3页上的项目较少，因此，当您返回到第1或第2页时，将再次调用其余的项目来检索评等值。

Answer 1

只需删除或替换track by $index即可。

$index的跟踪将给您以下行为：

有一个最大10长度的数组表示要显示的项。第一项将具有索引0。

转到下一页，数组中的项将被替换。

数组中的第一项仍然具有索引0。由于您正在按索引进行跟踪，而且索引没有更改，AngularJS将不会重新创建表示该项的DOM节点。因为DOM节点没有重新创建，所以这一次指令不会执行，评级也不会更新。

如果从第3页转到第2页，指令将对第2页上的最后7个元素执行，因为它们在第3页上不存在，因此这一次它们被认为是新元素。

如果您确实需要使用track by，则应该使用与对象(并且是唯一的)实际相关的属性，例如：

dir-paginate="asset in assets | itemsPerPage: 10 track by asset.name"

演示： http://plnkr.co/edit/A80tSEliUkG5idBmGe3B?p=preview