Angularjs 向ng repeat中的最后一个元素添加指令，然后使用ngAnimate设置其动画

在使用Angular函数在指令内部构建列表时，我遇到了一个特定的问题。我正在向数组中添加页面，并通过ng repeat在站点上显示它们。我想给网站的最后一个页面设置动画，但是当我只想给最后一个元素添加另一个指令时，事情就变得复杂了

我制作了这个简单的演示，展示了我在Plunker中要实现的目标：

这是我用于显示页面的模板：

<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>

添加
{{page.content}
{{page.content}

问题是，它总是为最后两个元素设置动画（因为在添加新元素后，它会同时更改这两个元素）。我想在最后一个元素上添加指令，并且只设置最后一个元素的动画

任何关于如何解决这一问题并使其发挥作用的建议都将不胜感激！所以，提前感谢大家的帮助

编辑：

---

这是我在指令模板中使用的css类的问题（我将.page重命名为.content）。我更新了，现在一切都正常了：）这么多年来，我仍然无法不时地通过那些“noob”错误：D

您可以将

页偏移量

指令更改为类类型。类似于如下所示的内容

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>

添加页面
{{page.content}

---

这是更新的。

嘿，谢谢你的帮助，这与我在本例中寻找的不完全一样，因为我需要将指令作为属性，以便向其传递一些附加参数。但有了你的回答，我学到了一种新的方法，这在将来肯定会很有用。在我上面的例子中，这是一个“noob”错误。。。css类的问题…：）更新了PLUNKER，现在可以正常工作了。但还是再次感谢你的帮助！