angularjs获取先前的路线路径

标签 angularjs angularjs-routing

<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:'/'
  });

Controller

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'};
}

正如您在我的 Controller 中看到的,我对后退按钮 URL 和文本进行了硬编码(实际上我不需要像使用图像那样的文本)。通过这种方式,我发现后退按钮在某些情况下导航不正确。我无法使用 history.back() 因为我的后退按钮更改为主视图中的菜单链接。

所以我的问题是如何获取 Controller 中的先前路由路径或者是实现此目的的更好方法?

我创建了一个Plunker演示我的问题。请检查一下。

最佳答案

此替代方案还提供后退功能。

模板:

<a ng-click='back()'>Back</a>

模块:

myModule.run(function ($rootScope, $location) {

    var history = [];

    $rootScope.$on('$routeChangeSuccess', function() {
        history.push($location.$$path);
    });

    $rootScope.back = function () {
        var prevUrl = history.length > 1 ? history.splice(-2)[0] : "/";
        $location.path(prevUrl);
    };

});

关于angularjs获取先前的路线路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15175429/

相关文章:

angularjs - 在 Angular + TypeScript 中以类型安全的方式使用带有自定义字段的 $http 拦截器

css - 如何使用尽可能少的 JavaScript 来创建垂直堆叠的网格

javascript - 指令中的多个 $observe

angularjs 跨路由维护范围变量

angularjs - href ="#"导致位置地址改变,我们可以避免吗?

javascript - Angular 1.5.8 组件与 typescript (ecma6) 和 (ecma5) 配置不同

angularjs - tsconfig.json : using TypeScript in a team with Atom and VSCode?

javascript - 将路由和导航样式与 AngularJS 关联起来

angularjs - Spring Boot Web 应用程序中的 Angular 路由

javascript - 无法推送拦截器