angular.js 中检测 $last 的指令不适用于 ng-if

Question

我正在使用 angular.js 和 jquery 开发新闻提要页面。

我正在使用一个指令来检测要显示的最后一个提要。当它 return scope.$last ==true 时，我调用一个函数来做一些 Jquery 动画。

然后，我添加了一个 ng-model showYear 按日期过滤元素，并添加 ng-if 过滤元素。

我的问题是，当最后一个元素被 ng-if 过滤并且没有呈现时，该指令无法检测 scope.$last 和运行 feedPosition().

我试过像下面的 url 那样做，但它面临同样的问题：here.

请帮忙。

这是我的代码：

HTML:

<div id="feedList">
    <div ng-repeat="feed in feeds | orderBy: '-date'" ng-if="show(feed.date)" feed-list-repeat-directive>
        //some content here
    </div>
</div>

Javascript:

<script>
var feeds = [{
    "type" : "publications",
    "source" :"AAA",
    "date" : new Date(2014, 4, 10),
    "title" : "title 2014",
    "thrumb" : "thrumb1.jpg"
},{
    "type" : "tvc",
    "source" : "BBB",
    "date" : new Date(2015, 4, 10),
    "title" : "title 2015",
    "thrumb" : "thrumb2.jpg"
}];

var app = angular.module('anApp', []);
app.controller('anCtrl', function($scope) {
     $scope.showYear = 2015;
     $scope.feeds = feeds;
    $scope.show = function(yr){
        return Number(yr.getFullYear())==$scope.showYear;
    };
})
.directive('feedListRepeatDirective', function() {
  return function(scope, element, attrs) {
    if (scope.$last){
        feedPosition(true);
    };
  };
});


function feedPosition(){
    for(a=0; a<$('#feedList > div').length; a++){       
        // do something to animate elements position
    };
};
</script>

Answer 1

目前，$last 适用于按 date 排序的数组 feeds。 ng-if 正在控制是否呈现每个项目，但它实际上并没有过滤列表。

为了以 $last 按要求运行的方式过滤列表，删除 ng-if 并使用 Angular 的 filter。 filter 根据 show 函数从 feeds 数组中选择项目的子集，并将它们 returns 作为一个新数组。新数组仅包含 show 函数 returns true 的那些元素。

<div ng-repeat="feed in feeds | filter: show | orderBy: '-date'" feed-list-repeat-directive>
    //some content here
</div>

请注意，show 函数必须稍微修改以将完整的 Feed 作为输入而不是日期：

$scope.show = function(feed){
    return Number(feed.yr.getFullYear())==$scope.showYear;
};

angular.js 中检测 $last 的指令不适用于 ng-if

A directive to detect $last is not working with ng-if in angular.js

javascript

jquery

directive

angularjs

angularjs-directive