将指令添加到ng-repeat中的最后一个元素，然后使用ngAnimate对其进行动画处理

Question

我在使用Angular的指令中构建列表时遇到了一个问题。 我将页面添加到数组中，并通过ng-repeat在网站上显示它们。 我想为网站的最后一页设置动画，但是当我还想仅向最后一个元素添加另一个指令时，事情变得很复杂。

我构建了一个简单的演示，演示了我要在Plunker中实现的目标： DEMO

这是我显示页面的模板：

<div>
    <button ng-click='addPage()'>Add</button>
    <div class='page' ng-repeat="page in pages track by $index">
        <div ng-if='!$last' class="page">{{page.content}}</div>
        <div ng-if='$last' class="page" page-offset>{{page.content}}</div>
    </div>
</div>

问题在于，它总是对最后两个元素进行动画处理（因为添加了新元素后，它会同时改变这两个元素）。 我想在最后一个指令上添加指令，并且仅对最后一个元素设置动画。

我们将非常感谢您提供有关如何解决该问题并使之发挥作用的任何建议！ 因此，感谢大家的提前帮助。

编辑：

我在指令模板中使用的css类存在问题（我将.page重命名为.content）。 我更新了插件 ，现在一切正常：)那些年来，我仍然无法不时克服那些“新手”的错误：D

Answer 1

您可以将page-offset指令更改为类类型。 类似于以下所示。

angular.module('yourModule', [])
.directive('pageOffset', function() {
  return {
    restrict: 'C', // It will restrict your directive to a class
    templateUrl: 'page-offset.html'
  };
});

然后在ng-repeat ，可以通过检查ng-attr-class是否为最后一个元素来有条件地应用该类。 这里，“ page page-offset”类将应用于最后一个元素，而仅“ page”类将应用于其他元素。

<div>
    <button ng-click='addPage()'>Add page</button>
    <div class='page' ng-repeat="page in pages track by $index">
        <div ng-attr-class="{{$last && 'page page-offset' || 'page'}}">{{page.content}}</div>
    </div>
</div>

这是更新的plunkr 。