Bug? nav-direction does not work if used within ng-repeat

#1

Hello,

I have this code:

        <a ng-repeat="album in albums" 
           href="#/menu/choosePicture/{{ album.id }}"
           nav-direction="none"
           class="item item-thumbnail-left"
           >

          <img ng-src="{{ album.picture }}">
          <h2>{{ album.name }}</h2>
        </a>

As you can see I’m using nav-direction=“none”. This is because the following view has a lot of pictures in it, and the standard nav-direction=“forward” aimation looks pretty bad then.

However, the nav-direction is ignored here. I use nav-direction=“none” in other places of my app and it works fine, the only difference being the ng-repeat.

Am I doing something wrong or is this a bug?

If it’s a bug, is there a workaround?

#2

I’ve been having this issues as well. nav-direction=‘direction’ works well in both my controllers when I add it before $state.go and in the html when I add it as an attribute; however, it doesn’t seem to be working when I add it to an ng-repeat list.

UPDATE

As a work around I removed the ui-sref attribute and instead am using an on-tap attribute to run a function in the controller that uses $state.go(…, {}) See below as an example:

In the HTML:

<div class='stop-info-panel' on-tap='seeTrip(route.id)' ng-repeat='route in routesArray'>

And in the controller:

$scope.seeTrip = function(route) {
$ionicViewSwitcher.nextDirection(‘forward’);
$state.go(‘shuttle.planner.trip-details’, {‘id’: route});
}

And I suppose if you’re interested in the config function:

  .state('shuttle.planner.trip-details', {
    url: '/:id',
    views: {
      'shuttle-planner-tab@shuttle': {
        templateUrl: 'templates/shuttle/trip-details.html',
        controller: 'ShuttleTripDetailsCtrl'
      }
    }
  })

Just make sure you’re injecting $ionicViewSwitcher into your controller and you should be good to go after customizing it.

1 Like