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> 

때문에, 나는 푸시되는 새 페이지를 감시하기위한 이벤트 핸들러를 추가 한 네비게이션 컨트롤러 및 캐 러셀이있는 페이지 인 경우 캐 러셀의 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 with Onsen을 사용하고 있습니다. 이것은 어떻게 든 이벤트 처리기를 추가하는 방식 때문입니다. $ digest cycle이나 그 밖에 없습니까?

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 잘못 될 수 있습니다.

당신이 조금 더 그것을 할 수있는이 'postchange'이벤트 문제를 방지하려면 ... 바로 carousel.refresh(); 후

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

를 사용하여 당신이 생각할 수있는이 문제를 해결하려면,하지만 다시 'postchange'이벤트 트리거 것 각도와 같은 :

// 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; 
}); 

이 이전보다 좋아 보이는,하지만 여전히 약간의 버그가 ... 당신이 그것을 수정하고 문제를 해결하는 방법을 찾을 수 있습니다,하지만 기다릴 아마 쉽게 다음 버전에서는 동적 인 회전 목마를 처리합니다.

희망이 있습니다.