Question

我有一个ng-repeat，根据用户选择的类别过滤掉项目。当页面呈现类别为全部且没有任何项目被过滤时。有三个类别，所选类别将传递到自定义筛选器中。当我调试时，我可以看到当我更改类别但是视图没有改变时列表正在正确更新。如果我单击列表中的某个项目，则ng-click正在强制$ digest并且视图将正确呈现。有什么办法可以强制视图在我的自定义过滤器后重新渲染吗？还有其他事情要发生，因为我在其他地方有自定义过滤器。

我使用ui-router所以这个视图是父ui-view，在下面我有另一个ui-view，在父控制器中我从列表中得到第一个故事并加载该子视图。我不确定这是否影响了这一点。

查看

<ul>
  <li ng-click="storyConfig.filter='all'">
    <div>All</div>
  </li>
  <li ng-click="storyConfig.filter='watch'">
    <div>Watch</div>
  </li>
  <li ng-click="storyConfig.filter='movement'">
    <div>Move</div>
  </li>
</ul>
<li ng-repeat="story in filteredStories = (allStories | stories:storyConfig.filter | orderBy:'datePosted':true)"
    ng-click="storyConfig.activeStoryId=story._id;$state.go('stories.story', {storyId:story._id})">
  <div>
    <div class="center">
      <h3>{{story.datePosted}}</h3>
    </div>
    <div>
      <h4>{{story.headline}}</h4>
    </div>
  </div>
</li>
<li ng-if="filteredStories.length === 0 && storyConfig.filter === 'watch'">
  <div>
    <div class="center">
      <h6>You are not watching any stories</h6>
    </div>
  </div>
</li>

过滤

app.filter('stories', ['StoryService', function(StoryService) {
  return function(stories, filter) {

    return stories.filter(function(story) {
      var add = false;
      if (filter === 'all' || (filter === 'movement' && story.movement === true)) {
        add = true;
      } else if (filter === 'watch') {
        angular.forEach(story.tags, function(tagId) {
          var tag = StoryService.getTag(tagId);
          if (tag !== undefined && tag.watch) {
            add = true;
          }
        });
      }

      return add;
    });
  };
}]);

控制器

app.controller('StoriesController', ['$scope', '$rootScope', '$state', 'StoryService',
  function($scope, $rootScope, $state, StoryService) {

  $scope.storyConfig = {};
  $scope.allStories = StoryService.getAll();
  $scope.storyConfig.filter = 'all';


  if ($scope.storyConfig.activeStoryId === undefined) {
    $scope.storyConfig.activeStoryId = $scope.allStories[0]._id;
  }
  $state.go('stories.story', {storyId:$scope.storyConfig.activeStoryId});
}]);

Answer 1

对于任何有兴趣的人，我都知道问题是什么。在每个故事列表项上，我应用了过渡样式。有了这个，我试图将故事项向左滑动，让它在屏幕上设置动画，然后在动画完成后将其从列表中删除。

ul li{
  position:relative;
  left:0;
  transition:left 0.2s ease;
}
ul li.swipe-left {
  left:-320px;
}

任何想法为什么这可能会抛出角度$摘要的时机？是否有更好的方法可以使用angular？将列表项设置为视图外的动画？

自定义过滤器后角度ng重复视图不会更新

1 个答案: