mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
amend(slideBox): always call on-slide-changed, even if no selected attr
This commit is contained in:
33
js/angular/directive/slideBox.js
vendored
33
js/angular/directive/slideBox.js
vendored
@@ -13,7 +13,7 @@
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-slide-box on-slide-changed="slideHasChanged($index)" loop="shouldLoop" auto-play="3000">
|
||||
* <ion-slide-box on-slide-changed="slideHasChanged($slideIndex)" loop="shouldLoop" auto-play="3000">
|
||||
* <ion-slide>
|
||||
* <div class="box blue"><h1>BLUE</h1></div>
|
||||
* </ion-slide>
|
||||
@@ -29,7 +29,7 @@
|
||||
* @param {expression=} selected A model bound to the selected slide index.
|
||||
* @param {boolean=} loop Whether the slide box should loop. Default false.
|
||||
* @param {number=} auto-play If a positive number, then every time the given number of milliseconds have passed, slideBox will go to the next slide. Set to a non-positive number to disable. Default: -1.
|
||||
* @param {expression=} on-slide-changed Expression called whenever the slide is changed. Is passed an '$index' variable.
|
||||
* @param {expression=} on-slide-changed Expression called whenever the slide is changed. Is passed a '$slideIndex' variable.
|
||||
* @param {string=} delegate-handle The handle used to identify this slideBox with
|
||||
* {@link ionic.service:$ionicSlideBoxDelegate}.
|
||||
*/
|
||||
@@ -65,8 +65,8 @@ function($ionicSlideBoxDelegate, $window) {
|
||||
var deregister = $ionicSlideBoxDelegate._registerInstance(slideBoxCtrl, attr.delegateHandle);
|
||||
scope.$on('$destroy', deregister);
|
||||
|
||||
watchSelected();
|
||||
isDefined(attr.loop) && watchLoop();
|
||||
isDefined(attr.selected) && watchSelected();
|
||||
isDefined(attr.autoPlay) && watchAutoPlay();
|
||||
|
||||
var throttledReposition = ionic.animationFrameThrottle(repositionSlideBox);
|
||||
@@ -91,23 +91,26 @@ function($ionicSlideBoxDelegate, $window) {
|
||||
});
|
||||
}
|
||||
|
||||
function watchSelected() {
|
||||
scope.$watch('selectedIndex', function selectedAttrWatchAction(newIndex) {
|
||||
if (slideBoxCtrl.isInRange(newIndex)) {
|
||||
scope.onSlideChanged({
|
||||
//DEPRECATED $index
|
||||
$index: newIndex,
|
||||
$slideIndex: newIndex
|
||||
});
|
||||
if (slideBoxCtrl.selected() !== newIndex) {
|
||||
slideBoxCtrl.select(newIndex);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function watchLoop() {
|
||||
var unwatchParent = scope.$parent.$watch(attr.loop, slideBoxCtrl.loop);
|
||||
scope.$on('$destroy', unwatchParent);
|
||||
}
|
||||
|
||||
function watchSelected() {
|
||||
scope.$watch('selectedIndex', function selectedAttrWatchAction(newIndex, oldIndex) {
|
||||
if (slideBoxCtrl.isInRange(newIndex) &&
|
||||
slideBoxCtrl.selected() !== newIndex) {
|
||||
slideBoxCtrl.select(newIndex);
|
||||
scope.onSlideChanged({
|
||||
$index: newIndex
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function watchAutoPlay() {
|
||||
var unwatchParent = scope.$parent.$watch(attr.autoPlay, slideBoxCtrl.autoPlay);
|
||||
scope.$on('$destroy', unwatchParent);
|
||||
|
||||
@@ -120,4 +120,22 @@ describe('ionSlideBox directive', function() {
|
||||
$interval.flush();
|
||||
expect(slideBoxCtrl.selected()).toBe(0);
|
||||
}));
|
||||
|
||||
it('should call onSlideChanged', inject(function($rootScope, $timeout) {
|
||||
$rootScope.changed = jasmine.createSpy('slideChanged');
|
||||
var el = makeSlideBox('<ion-slide-box on-slide-changed="changed($slideIndex)">' +
|
||||
'<ion-slide>A</ion-slide>' +
|
||||
'<ion-slide>B</ion-slide>' +
|
||||
'<ion-slide>C</ion-slide>' +
|
||||
'</ion-slide-box>');
|
||||
|
||||
$rootScope.$apply();
|
||||
var slideBoxCtrl = el.controller('ionSlideBox');
|
||||
$timeout.flush();
|
||||
expect($rootScope.changed).toHaveBeenCalledWith(0);
|
||||
|
||||
slideBoxCtrl.select(1);
|
||||
$rootScope.$apply();
|
||||
expect($rootScope.changed).toHaveBeenCalledWith(1);
|
||||
}));
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user