Two-Way Binding of Swiper problem

[quedicesebas]

I was trying to listen to an event, so I first tried the example:

<ks-swiper-container swiper="rosesSwiper" loop="true" slides-per-view="1"> <ks-swiper-slide class="swiper-slide" ng-repeat="rose in roses"> <div class="imgFullWu" style="background: url(img/roses/{{rose.id}}.jpg);"></div> <div class="t_rose"> <h1>{{rose.title}}</h1> <p>{{rose.description}}</p> <button class="boton_g" ng-click="selectRose(rose.id)"> Regalar </button> </div> </ks-swiper-slide> </ks-swiper-container>

.controller('RosesCtrl', function($rootScope, $scope, $ionicModal, $state, generalService) { $scope.rosesSwiper = {}; generalService.GetRoses(function (roses) { $scope.roses = roses; }); $scope.rosesSwiper..on('slideChangeStart', function () {}); })`

And I get TypeError: $scope.rosesSwiper.on is not a function

[ksachdeva]

Hi Sebrojas,

You are not providing the controller that manages "swiper" to the directive. I have updated the demo/index.html to show how to use it.

Regards Kapil

[quedicesebas]

Is not clear for me...I'm using Ionic, and the view has already a controller, so...

[ksachdeva]

Hi Sebrojas,

The controller of your view needs to have the swiper object in its $scope. Provide me the snippet of ionic view code and may be it will clear up what may be wrong.

Also try running the demo app by performing following steps - git clone npm install bower install gulp serve

then in your browser go to demo/index.html ... I have put an example for 2 way binding in this demo.

[quedicesebas]

The view

`

 

{{rose.title}}

{{rose.description}}

Regalar

`

The controller:

.controller('RosesCtrl', function($rootScope, $scope, $ionicModal, $state, generalService) {

$scope.rosesSwiper = {};

//this works $scope.next = function(){ $scope.rosesSwiper.slideNext(); };.

//this doesn't works, obviosly, $scope.rosesSwiper is {}...so when I have to put the event listener? $scope.rosesSwiper.on('slideChangeStart', function () {

`console.log('slideChangeStart');`.

}); .})

[ksachdeva]

Hi Sebrojas,

Not able to see where you are specifying your controller ?

try this - `

`

[quedicesebas]

@ksachdeva the controller in Ionic is specified in the state configuration:

.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('app', { url: '/app', abstract: true, templateUrl: 'templates/menu.html', controller: 'AppCtrl' }) .state('app.roses', { url: '/roses', views: { 'menuContent': { templateUrl: 'templates/roses.html', controller: 'RosesCtrl' } } }); // if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('/app/roses'); });

Addtionally, I already get working the example of nextSlide() in my app...the problem is with events

[hrpatidar]

Hi Sebrojas,

I am doing the same thing which you have done above.

But I am always getting undefined this object $scope.rosesSwiper. Not able to call slideNext or slideTo.

coming $scope.rosesSwiper.slideNext() is not a function.

Please help me out.

Thanks

[quedicesebas]

I ended using the new slide-box of ionic http://ionicframework.com/docs/api/directive/ionSlideBox/

[juergengunz]

@ksachdeva i have the same issue, as controllers in Ionic are specified in the state configuration. Is there any chance to make it work like that?

[najafi-saeed]

@ksachdeva I have the same issue!