angularjs - 使用 Onsen UI 从轮播中删除项目

Question

我有一个使用 Onsen UI 的简单应用程序，并利用轮播并根据用户是否向左或向右滑动到当前轮播元素来更新数据。一旦他们刷卡了，我想从轮播中删除该元素，这样他们就无法再次访问它。我正在尝试使用 postchange 事件，该事件似乎工作正常，但是当我调用 carousel.refresh() 时，轮播不会更新。

轮播在 html 中的定义如下:

<ons-carousel var="carousel" swipeable overscrollable auto-scroll fullscreen initial-index="1">
  <ons-carousel-item ng-repeat="foo in bar.baz">
  ....
  </ons-carousel-item>
</ons-carousel>

因为轮播是在第一个页面以外的页面上初始化的，所以我添加了一个事件处理程序来监视将新页面推送到导航 Controller 上，如果是带有轮播的页面，则初始化轮播的 postchange 事件的处理程序并更新一些内容。我已针对本示例的情况进行了简化。

ons.ready(function(){
  mainNavigator.on('postpush', function(event){
    var page = event.enterPage;
      if (page.name == "carousel_page.html"){
        carousel.on('postchange', function(event){
          $scope.bar.baz.splice(event.lastActiveIndex, 1);
          setImmediate(function(){
            // even setting the array to [] here does not make a difference
            carousel.refresh();
          });
        });
      }
    });
  });

逐步完成所有内容，我可以验证轮播背后的数组是否已正确更新，轮播变量是否定义正确，并且刷新()被调用，但我的轮播从未更新。我在这里缺少什么？

我正在使用 Angular 和 Onsen，这是否是因为我添加事件处理程序的方式造成的？它是在 $digest 循环之外还是其他什么？

Answer 1

这里有一个错误列表...ons-carousel 是在 OnsenUI 的最后一个版本中发布的，它仅经过测试以与静态数量的元素和一些其他功能一起使用，但不是以这种方式。一切都将在几周后的下一个版本中得到修复。

如果您仍然想尝试一些东西，这可以给您一些想法:

$scope.carousel.on('postchange', function(event){
    $scope.$apply(function() {
        $scope.bar.baz.splice(event.lastActiveIndex, 1);
    });
    setImmediate(function(){
        carousel.refresh();
    });
});

现在应该删除并刷新，但由于一些错误行为，slideDistance 可能是错误的。要解决这个问题，您可以考虑使用

$scope.carousel.setActiveCarouselItemIndex($scope.carousel.getActiveCarouselItemIndex());

就在carousel.refresh();之后，但这会再次触发“postchange”事件...

为了避免这种“postchange”事件问题，您可以做得更有 Angular :

// Let's do something when the ActiveCarouselItemIndex changes
$scope.$watch(function(){return $scope.carousel.getActiveCarouselItemIndex()}, function(newIndex,oldIndex){
    if (newIndex !== oldIndex) {
        $scope.bar.baz.splice(oldIndex, 1);
        setImmediate(function(){
            $scope.carousel.refresh();
            // Avoid the position problem
            $scope.carousel.setActiveCarouselItemIndex($scope.carousel.getActiveCarouselItemIndex());
        });
    }
});
// Still necessary
$scope.carousel.on('postchange', function(event){
    $scope.$apply();
    return;
});

这看起来比前一个好，但仍然有点错误...你可能会找到一种方法来修改它并解决问题，但等待下一个版本可能会更容易解决动态轮播。

希望对你有帮助!