离子如何回到嵌套视图内

时间:2015-07-31 13:21:15

标签: html angularjs ionic-framework ionic

我无法恢复过渡到工作岗位。

我有一个名为main的抽象视图,它包含这个子视图。

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngStorage'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider){

    $ionicConfigProvider.views.transition('none');

    $urlRouterProvider.otherwise('/');

    $stateProvider

        .state('login',{
            url: '/',
            templateUrl: 'templates/login.html',
            controller: 'loginController'
        })

        .state('main', {
            url: '/main',
            templateUrl: 'templates/main.html',
            controller:   'mainController',
            abstract: true
        })

        .state('main.categories', {
            url: '/categories',
            views: {
                'categories': {
                    templateUrl: 'templates/categories.html',
                    controller: 'categoriesController'
                }
            }
        })

        .state('main.products', {
            url: '/products/:productId',
            views: {
                'products': {
                    templateUrl: 'templates/products.html',
                    controller: 'productsController'
                }
            }
        })

        .state('main.payments', {
            url: '/payments',
            views: {
                'payments': {
                    templateUrl: 'templates/payments.html',
                    controller: 'paymentsController'
                }
            }
        })

})

这是我的app.js,包含所有路线。

<ion-view view-title='Payments'>
<ion-content>
    <div class="row">
        <div class="col col-25">
            <a href="#/cash" class="button button-large button-block button-balanced">Cash</a>
        </div>
        <div class="col col-25">
            <a href="#" class="button button-large button-block button-calm">Credit Card</a>
        </div>
        <div class="col col-25">
            <a href="#" class="button button-large button-block button-energized">Discount</a>
        </div>
        <div class="col col-25">
            <button ng-click="cancel()" class="button button-large button-block button-assertive">Cancel</button>
        </div>
    </div>
    <div class="row">
        <div class="col col-25">
            <button ng-click="goBack()" class="button button-large button-block button-royal">Go Back</button>
        </div>
    </div>
</ion-content>

我有这个状态main.products,它是主要抽象视图的子项。

main.products

当我点击左下角的付款按钮时,它会转到main.payments视图。

main.payments

这是main.payments视图的代码

.controller('paymentsController', function($scope, $localStorage, $log, $state, $window, $ionicHistory){

$scope.cancel = function(){

    $localStorage.total= '';

    $state.go('main.categories');

    $window.location.reload();

};

$scope.goBack = function(){

    $ionicHistory.goBack();

}


})

现在,当我按下返回按钮时,页面中的URL会更改为上一页,但视图不会转换到该页面,直到我刷新页面。

enter image description here

这是我的付款控制器,用于处理返回按钮转换。

[{"user_id":"1","first_name":"Joao","last_name":"Silva"},{"user_id":"2","first_name":"Maria","last_name":"Santos"},{"user_id":"3","first_name":"Rosa","last_name":"Costa"}]

1 个答案:

答案 0 :(得分:0)

Main.payments和main.products是相邻的视图而不是子视图,虽然main.payments.view是main.payments的子节点,main.payments是main的子节点

所以你不能前往邻国。

如果你想要遍历,你必须特别提到$ state.go(STATE_NAME);或者您可以在按钮中使用ui-sref

注意:将“cache:false”添加到抽象视图