CODEWITHSUNDEEP
javascriptangularjsionic-framework
karfai
karfai

Reputation: 906

disable ion-slide at startup

Is it possible to disable slide feature on startup and at the same time I still able to set my own active-page?

I found this does the trick, in HTML

<ion-slide-box active-page="disableSlide()">
    <ion-slide>Slide 1</ion-slide>
    <ion-slide ng-click="previous()">Slide 2</ion-slide>
    <ion-slide>Slide 3</ion-slide>
</ion-slide-box>

In JavaScript,

$scope.disableSlide = function(){
    $ionicSlideBoxDelegate.enableSlide(false);
    return 1;
}

$scope.previous = function(){
    $ionicSlideBoxDelegate.previous();
}

But when I click previous, I get this error

Error: [$compile:nonassign] Expression 'disableSlide()' used with directive 'ionSlideBox' is non-assignable!

The Demo here, http://codepen.io/anon/pen/Bodqor

Please help me, thanks.

Upvotes: 0

Views: 372

Answers (1)

LeftyX
LeftyX

Reputation: 35597

<ion-slide-box> doesn't have an active-page attribute as you can see in the documentation.

You're getting that error cause you've disabled the slider:

$ionicSlideBoxDelegate.enableSlide(false);

but you still want to change slides with ng-click.

If you want to disable the slider when the view is shown you can use $ionicSlideBoxDelegate.enableSlide(false); but you'd better wrap it in a function:

function changeSlideStatus()
{
    $scope.slideEnabled = !$scope.slideEnabled;
    $scope.slideStatusTest = $scope.slideEnabled ? "Enabled" : "Disabled";

    $ionicSlideBoxDelegate.enableSlide($scope.slideEnabled); 
}

$scope.slideEnabled is a boolean property which defines the status of the slider.

When the navigation enters in your view you can change status:

$scope.$on('$ionicView.enter', function(){
    changeSlideStatus();
});

You can play with this Plunker. In the header you can disable/enable the slider simply calling changeSlideStatus();:

<ion-nav-buttons side="left">

  <button class="button button-positive"
          ng-click="changeStatus()">
    {{slideStatusTest}}
  </button>

</ion-nav-buttons>

PS: It starts disabled.

Upvotes: 1

Related Questions