javascript - AngularJS ng-repeat过滤器:{visible:true}不遵循属性更改

http://scythargon.github.io/

http://scythargon.github.io/main.js

var myApp = angular.module('myApp', ['infinite-scroll']);

myApp.controller('DemoController', function($scope, $timeout, $rootElement) {
    $scope.$rootElement = $rootElement;
    $scope.$timeout= $timeout;

    $scope.init = function(){
        $scope.posts = [
            {id: 1},
            {id: 2},
            {id: 3},
            {id: 4},
            {id: 5},
            {id: 6},
            {id: 7},
            {id: 8},
        ];

        window.posts = $scope.posts;
        _.each($scope.posts, function(post){
            post.visible = true;
        });
        //$scope.posts[1].visible = false;
    };

    $scope.is_visible = function(item) {
      return item.visible;
    };

    $scope.hide_topmost_items = function(){
        _.each($scope.posts, function(post){
            var elem = $('#post_' + post.id);
            if (elem.position().top + elem.height() + 500 < window.pageYOffset){
                post.visible = false;
                window.scrollTo(0, window.pageYOffset - elem.height());
                //elem.hide();
                console.log('#post_' + post.id + ' is hidden now')
            }
        });
    };

    $(window).on('scroll', $scope.hide_topmost_items);

    $scope.loadMore = function() {
        var length = $scope.posts.length;
        var last = $scope.posts[length - 1];
        for(var i = 1; i <= 8; i++) {
            $scope.posts.push({id: i + length});
        }
    };

    $scope.init();
});

https://github.com/scythargon/scythargon.github.io

我希望它隐藏比当前用户窗口高得多的元素，它通过jquery（注释为elem.hide();行）工作，但不是有角度的，甚至试图使过滤器功能如Internet上许多帖子所建议的那样，但是相同结果-它会在初始化（注释为visible: false的行）上隐藏$scope.posts[1].visible = false;，但动态更改时不会。

最佳答案

您的$scope.hide_topmost_items()是从外部角（$(window).on('scroll')）调用的，因此在$ scope中更改任何属性后，必须手动调用$scope.$apply()。

$scope.hide_topmost_items = function(){
  _.each($scope.posts, function(post){
    var elem = $('#post_' + post.id);
    if (elem.position().top + elem.height() + 500 < window.pageYOffset){
      post.visible = false;
      window.scrollTo(0, window.pageYOffset - elem.height());
      //elem.hide();
      console.log('#post_' + post.id + ' is hidden now')
    }
  });

  $scope.$apply(); // this is required when called from outside angular
};

希望能有所帮助。