Question

I'm just starting out with Ionic, and have run into a bit of a confusing problem; I have a couple of pages set up (Properties, Test and Xyzzy) set up as follows in the router:

$stateProvider

    .state( 'properties', {
        url: '/properties',
        templateUrl: 'templates/properties.html',
        controller: 'PropertiesController'
    } )

    .state( 'test', {
        url: '/test',
        abstract: true,
        templateUrl: 'templates/test.html',
        controller: 'TestController'
    } )
    .state( 'test.one', {
        url: '/one',
        views: {
            'one-tab': {
                templateUrl: 'templates/test-one.html',
                controller: 'TestController'
            }
        }
    } )
    .state( 'test.two', {
        url: '/two',
        views: {
            'two-tab': {
                templateUrl: 'templates/test-two.html',
                controller: 'TestController'
            }
        }
    } )

    .state( 'xyzzy', {
        url: '/xyzzy',
        templateUrl: 'templates/xyzzy.html',
        controller: 'XyzzyController'
    } );

Essentially there are two plain-and-simple pages (Properties and Xyzzy) and one page with tabs (Test). The templates for each page are very simple, and look like this - Properties, Xyzzy and Test

Enough explaining, here's the problem: as you can see, the Xyzzy page has detected that I've navigated to it from the Properties page and gives me a nice back button. It doesn't show up if I go to the Test page though (with the tabs). The code for that is this:

<ion-nav-bar class="bar-positive">
    <ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>

Also, when I navigate between Properties and Xyzzy, the page slides left/right in a nice little animation which looks clean. However, when I go into the Test page, there's no transition at all, nor is there when I come out of it.

I've spent a couple of hours looking around Google but can't find anything relevant to transitions in/out of tabbed pages. Any ideas?

Update: Here's the code the views are being built off (in index.html):

<body ng-app="app">

<ion-nav-bar class="bar-positive">
    <ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view animation="slide-left-right"></ion-nav-view>

</body>

Answer 1

可以使用转换

<ion-nav-view name="main" animation="slide-left-right"></ion-nav-view>

为您的网页

Animating onto, and keeping history for a tabbed page

1 个答案: