51 
<h1>{{header}}</h1>
<!-- This Back button has multiple option -->
<!-- In home page it will show menu -->
<!-- In other views it will show back link -->
<a ng-href="{{back.url}}">{{back.text}}</a>
<div ng-view></div>

私のモジュール設定で

  $routeProvider.
  when('/', {
    controller:HomeCtrl,
    templateUrl:'home.html'
  }).
  when('/menu', {
    controller:MenuCtrl,
    templateUrl:'menu.html'
  }).
  when('/items', {
    controller:ItemsCtrl,
    templateUrl:'items.html'
  }).
  otherwise({
    redirectto:'/'
  });

コントローラー

function HomeCtrl($scope, $rootScope){
  $rootScope.header = "Home";
  $rootScope.back = {url:'#/menu', text:'Menu'};
}

function MenuCtrl($scope, $rootScope){
  $rootScope.header = "Menu";
  $rootScope.back = {url:'#/', text:'Back'};
}

function ItemsCtrl($scope, $rootScope){
  $rootScope.header = "Items";
  $rootScope.back = {url:'#/', text:'Back'};
}

コントローラーでわかるように、戻るボタンの URL とテキストをハードコーディングしました (実際には、画像を使用するのでテキストは必要ありません)。このようにして、場合によっては戻るボタンのナビゲートが正しくないことがわかりました。history.back()戻るボタンがホーム ビューのメニュー リンクに変わるため、使用できません。

私の質問は、コントローラーで以前のルートパスを取得するにはどうすればよいですか、それともこれを達成するためのより良い方法ですか?

私の問題のPlunkerデモンストレーションを作成しました。それを確認してください。

4

8 に答える 8

5

@andresh私にとっては、routeChangeSuccessの代わりにlocationChangeSuccessが機能しました。

//Go back to the previous stage with this back() call
var history = [];
$rootScope.$on('$locationChangeSuccess', function() {
    history.push($location.$$path);
});

$rootScope.back = function () {
          var prevUrl = history.length > 1 ? history.splice(-2)[0] : "/";
          $location.path(prevUrl);
          history = []; //Delete history array after going back
      };
于 2015-07-11T13:36:18.853 に答える
4

Angular 1.x では、イベント リスナーを $rootScope に結合する必要がありますが、以前の場所の値を $rootScope に格納しないようにすることで、コードの将来性を少し証明する必要があります。値を保存するのに適した場所はサービスです。

var app = angular.module('myApp', [])
.service('locationHistoryService', function(){
    return {
        previousLocation: null,

        store: function(location){
            this.previousLocation = location;
        },

        get: function(){
            return this.previousLocation;
        }
})
.run(['$rootScope', 'locationHistoryService', function($location, locationHistoryService){
    $rootScope.$on('$locationChangeSuccess', function(e, newLocation, oldLocation){
        locationHistoryService.store(oldLocation);
    });
}]);
于 2015-11-03T16:59:46.897 に答える
4

これは、現在、以前のパスへの参照を次のように保存する方法です$rootScope。

run(['$rootScope', function($rootScope) {
        $rootScope.$on('$locationChangeStart', function() {
            $rootScope.previousPage = location.pathname;
        });
}]);
于 2015-02-23T09:15:02.390 に答える
1

文書化するだけです：

コールバック引数には、サービスによく似previousRouteたプロパティが呼び出されています。残念ながら、引数には、現在のルートに関する多くの情報がありません。$route$routecurrentRoute

これを克服するために、私はこのようなことを試しました。

$routeProvider.
   when('/', {
    controller:...,
    templateUrl:'...',
    routeName:"Home"
  }).
  when('/menu', {
    controller:...,
    templateUrl:'...',
    routeName:"Site Menu"
  })

routeName上記のルート構成では、というカスタム プロパティが追加されていることに注意してください。

app.run(function($rootScope, $route){
    //Bind the `$routeChangeSuccess` event on the rootScope, so that we dont need to 
    //bind in induvidual controllers.
    $rootScope.$on('$routeChangeSuccess', function(currentRoute, previousRoute) {
        //This will give the custom property that we have defined while configuring the routes.
        console.log($route.current.routeName)
    })
})
于 2013-03-06T05:34:02.527 に答える
1

上記のコードの変更:

$scope.$on('$locationChangeStart',function(evt, absNewUrl, absOldUrl) {
   console.log('prev path: ' + absOldUrl.$$route.originalPath);
});
于 2014-02-23T11:10:56.033 に答える