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）。我更新了plunker，现在一切正常应用:)这些年来，我仍然无法通过那些＆＃39; noob＆＃39;不时出错：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通过检查它是否是最后一个元素来有条件地应用该课程。在这里＆＃39;页面偏移＆＃39; class将应用于最后一个元素，而且只是＆＃39; page＆＃39; class将应用于其他元素。

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

将指令添加到ng-repeat中的最后一个元素，然后使用ngAnimate

1 个答案: