我的观点如下:
<ion-view title="Slides" ng-controller='IntroCtrl'>
<ion-content ng-controller='IntroCtrl'>
<h3> Slides here </h3>
<!-- <ion-nav-buttons side="left">
<button class="button button-positive button-clear no-animation"
ng-click="previous()" ng-if="data.slideIndex > 0">
Previous Slide
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-positive button-clear no-animation"
ng-click="next()" ng-if="data.slideIndex < data.numViewableSlides - 1">
Next
</button>
</ion-nav-buttons>-->
<ion-slide-box on-slide-changed="slideChanged(index)">
<ion-slide ng-repeat="slide in data.slides">
<div ng-include src="slide.template"></div>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
控制器
.controller('IntroCtrl', function($scope, $state, $ionicSlideBoxDelegate, $ionicSideMenuDelegate) {
$scope.$on('$ionicView.enter', function() {
$ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.leave', function() {
$ionicSideMenuDelegate.canDragContent(true);
});
$scope.data = {
numViewableSlides: 0,
slideIndex: 0,
slides: [{
'template': 'templates/mylongform.html'
},
{
'template': 'templates/facts.html'
},
{
'template': 'templates/facts2.html'
}
]
};
var countSlides = function() {
$scope.data.numViewableSlides = 0;
for (var i = 0; i < $scope.data.slides.length; i++) {
$scope.data.numViewableSlides++;
}
console.log($scope.data.numViewableSlides + " viewable slides");
}
countSlides();
$scope.next = function() {
$ionicSlideBoxDelegate.next();
console.log("called next")
};
$scope.previous = function() {
$ionicSlideBoxDelegate.previous();
console.log("called previous")
};
// Called each time the slide changes
$scope.slideChanged = function(index) {
$scope.data.slideIndex = index;
};
})
我使用过slideMenu Delegate,因为没有它,每次我尝试滑动时都会刷一下侧面菜单。
但即使是现在,滑块也不起作用。 这里看错了什么?