scope.$on('slideBox.slideChanged') doesn't triggers, so buttons are not getting updated with the ng-hide toggle

[harellevy]

The issue is with ion-wizard-previous, ion-wizard-previous directives.

Heres whats happaning: ionic.bundle.js (line 54515 - ionic 1.01):

$scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);

is getting fired; But the watcher for the event:

scope.$on("slideBox.slideChanged", function(e, index) {

isn't getting fired.

i solved it in the meanwhile until i'll have an understanding on what goes wrong here. Here's how I solved it:

app.controller('myCtrl', ['$scope',
    function($scope) {
      var vm = this;
      // fix to prev next buttons
      var last_slide = 0;
      vm.slideHasChanged = function(index){
        var length = $('ion-slide').length;

        if (index == 0 || last_slide==0) {
          $('[ion-wizard-previous]').toggleClass('ng-hide');
        }
        if (index == length-1 || (index == length-2 && last_slide==length-1)){
          $('[ion-wizard-next]').toggleClass('ng-hide');
        }
        last_slide = index;
      };

and by adding the attribute to my ion-slide-box element like so

<ion-slide-box ion-wizard on-slide-changed="vm.slideHasChanged($index)">

[arielfaur]

This is weird. It would be interesting to know if anybody else has experienced this issue. You could create a Plunker only to test the slidebox component alone in order to isolate the issue.

[harellevy]

The problem was that i was using ion-content as my tab wrapper (Which adds the gap needed including tabs and header, for ios and android (android tabs are at the top of the page, ios at the bottom).

i figured this because it worked without the tab ion-content but the tabs gaps wasn't fixed, so i solved it with only one content:

<ion-wizard-content class="padding has-header" ng-class="{'has-tabs-top': $hasTabsTop, 'has-tabs' : !$hasTabsTop}">

[arielfaur]

So you placed ion-wizard-content inside the ion-slide as described in the documentation, right? Only difference is that in your case you need to add the has-tabs class in addition to has-header. Am I right? Maybe I should add that to the documentation.

[harellevy]

exactly. and make sure you use only ion-wizard-content and not use another ion-content as a wrapper for the tab content.

[arielfaur]

Yes, the only difference between ion-content and ion-wizard-content is the latter allows scope inheritance.