AngularJS强制后退按钮路线

Question

My back button is sending me to the first page/state of my app (cadastreSe). How can I force it to go back to previous page/state ('menu.temporada2016') with my button id="temporada2016-button3" active. Is it possible with angularjs?

I hat to enable it with $scope.$on('$ionicView.beforeEnter'...

states :

angular.module('app.routes', [])

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

$stateProvider


.state('menu.temporada2016', {
cache: false,
url: '/page1',
views: {
  'side-menu21': {
    templateUrl: 'templates/temporada2016.html',
    controller: 'temporada2016Ctrl',
    params: { dataToTemp: false }        
  }
}
})

.state('menu.fotos', {
url: '/page2',
views: {
  'side-menu21': {
    templateUrl: 'templates/fotos.html',
    controller: 'fotosCtrl'
  }
}
})

.state('menu.configuraEs', {
url: '/page3',
views: {
  'side-menu21': {
    templateUrl: 'templates/configuraEs.html',
    controller: 'configuraEsCtrl'
  }
}
})

.state('menu', {
url: '/side-menu21',
templateUrl: 'templates/menu.html',
abstract:true
})

.state('detalhes', {
cache: false,
url: '/page4',
params: {
  dataToDetails: false
},
templateUrl: 'templates/detalhes.html',
controller: 'detalhesCtrl'
})

.state('cadastreSe', {
url: '/page5',
templateUrl: 'templates/cadastreSe.html',
controller: 'cadastreSeCtrl'
})

.state('home', {
url: '/page6',
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
})

.state('suporte', {
url: '/page7',
templateUrl: 'templates/suporte.html',
controller: 'suporteCtrl'
})

.state('fotos2', {
url: '/page8',
templateUrl: 'templates/fotos2.html',
controller: 'fotos2Ctrl',
params: {
  dataToFotos: false
}
})

$urlRouterProvider.otherwise('/page5')



});

controller :

.controller('fotos2Ctrl', ['$scope', '$state', '$ionicModal', '$ionicSlideBoxDelegate', '$ionicScrollDelegate', function ($scope, $state, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate) {

$scope.$on('$ionicView.beforeEnter', function(event, viewData){
    viewData.enableBack = true;
});

$scope.$on('$routeChangeSuccess', function(event, current, previous){


});

if(!$state.params.dataToFotos) {
    console.log($state.params.dataToFotos);

}else{

    console.log($state.params.dataToFotos);
    $scope.images = $state.params.dataToFotos.album;         
}

$scope.zoomMin = 1;

// image gallery
$scope.showImages = function(index) {
    $scope.activeSlide = index;
    $scope.showModal('templates/popover.html');
}

$scope.showModal = function(templateUrl) {
    $ionicModal.fromTemplateUrl(templateUrl, {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function(modal) {
        $scope.modal = modal;
        $scope.modal.show();
    });
}

// Close the modal
$scope.closeModal = function() {
    $scope.modal.hide();
    $scope.modal.remove()
};

$scope.updateSlideStatus = function(slide) {

    var zoomFactor = $ionicScrollDelegate.$getByHandle('scrollHandle' + slide).getScrollPosition().zoom;

    if (zoomFactor == $scope.zoomMin) {
        $ionicSlideBoxDelegate.enableSlide(true);
    } else {
        $ionicSlideBoxDelegate.enableSlide(false);
    }
};

}])

fotos2.html

<ion-view title="Fotos ..." id="page8" style="background-color:#FFFFFF;">
 <ion-content padding="true" class="has-header">
    <!--<div class="row responsive-md">
        <div class="col col-25" ng-repeat="image in images">
            <img ng-src="http://localhost/dashboard/{{image.FILE}}" width="100%" />
        </div>
    </div>-->
    <div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
        <div class="col col-25" ng-if="$index < images.length">
            <img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index].FILE}}" width="100%" ng-click="showImages($index)" />
        </div>
        <div class="col col-25" ng-if="$index + 1 < images.length">
            <img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 1].FILE}}" width="100%" ng-click="showImages($index+1)" />
        </div>
        <div class="col col-25" ng-if="$index + 2 < images.length">
            <img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 2].FILE}}" width="100%" ng-click="showImages($index+2)" />
        </div>
        <div class="col col-25" ng-if="$index + 3 < images.length">
            <img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 3].FILE}}" width="100%" ng-click="showImages($index+3)" />
        </div>
    </div>
 </ion-content>
</ion-view>

temporada2016.html

<ion-view title="Temporada 2016" id="page1" style="background-color:#FFFFFF;">
 <ion-content padding="true" class="has-header">
    <div id="temporada2016-button-bar1" class="button-bar">
        <button id="temporada2016-button2" style="color:#008BBB;" class="button button-light  button-block button-outline" ng-class="{active_news_btn: active_news_btn}" ng-click="activate_news()">Notícias</button>
        <button id="temporada2016-button3" style="color:#008BBB;" class="button button-light  button-block button-outline" ng-class="{active_albums_btn: active_albums_btn}" ng-click="activate_albums()">Fotos</button>
    </div>

    <form id="temporada2016-form8" class="list" ng-show="search_news">
        <label class="item item-input" name="search_news">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="search" placeholder="Pesquisar Notícia" ng-model="searchNews">
        </label>
    </form>

    <div class="item item-body list-container" id="temporada2016-list-item-container4" ng-model="item_id" ng-repeat="x in items | filter:searchNews" item="x" href="#/x/{{x.ID}}" ng-click="open_item(x)" ng-show="news_list">

        <div id="temporada2016-markdown7" style="margin-top:0px;color:#666666;">
            <h2 style="color:#008BBB;">{{ x.TITLE }}</h2>
        </div>

    </div>


    <!--<ion-list class="widget uib_w_1 d-margins" data-uib="ionic/list" data-ver="0">
        <ion-item class="item widget uib_w_2" data-uib="ionic/list_item" data-ver="0" ng-repeat="x in items">{{ x.TITLE }}</ion-item>
    </ion-list>-->

    <ion-list id="fotos-list4" ng-show="albums_list">
        <ion-item class="item-icon-left item-icon-right calm" id="fotos-list-item4" ng-model="album_name" ng-repeat="item in albums" item="item" href="#/item/{{item.FOLDER}}" ng-click="open_album(item)">
            <i class="icon ion-images"></i>
                {{item.FOLDER}}
            <i class="icon ion-ios-arrow-forward"></i>
        </ion-item>
    </ion-list>
 </ion-content>
</ion-view>

index.html

<body ng-app="app" animation="slide-left-right-ios7">
 <div>
  <div>
     <ion-nav-bar class="bar-calm">
        <ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
     </ion-nav-bar>
     <ion-nav-view></ion-nav-view>
    </div>
  </div>
</body>

Answer 1

You can overwrite the header of the specific page by adding a new one to the template of the specific view. it should be even outside and above of the tag. simply have it mirror your normal header. then implement a back-button which looks the exact same, but have it trigger an ng-click event which you can then use to route the user to that specific view you want him to go back to, either by using $state.go() or by using the $ionicHistory dependancy to navigate back through the navigation stack.