angularjs获取上一条路线路径

Question

<h1>{{页眉}}</h1><!-- 此后退按钮有多个选项--><!-- 在主页中，它将显示菜单--><!-- 在其他视图中，它将显示反向链接--><a ng-href=“{{back.url}}”>{back.text}}</a><div ng-view>

在我的模块配置中

$routeProvider。when（'/'{控制器：HomeCtrl，模板URL:'home.html'}).when（“/menu”{控制器：MenuCtrl，templateUrl:“菜单.html”}).when（'/items'{控制器：ItemsCtrl，templateUrl:'items.html'}).否则({重定向到：“/”});

控制器

函数HomeCtrl（$scope，$rootScope）{$rootScope.header=“主页”；$rootScope.back={url:“#/menu”，text:“menu”}；}功能菜单Ctrl（$scope，$rootScope）{$rootScope.header=“菜单”；$rootScope.back={url:“#/”，文本：“后退”}；}函数ItemsCtrl（$scope，$rootScope）{$rootScope.header=“项目”；$rootScope.back={url:“#/”，文本：“后退”}；}

正如你在我的控制器中看到的那样，我已经硬编码了后退按钮的url和文本（事实上，我不需要使用图像的文本）。通过这种方式，我发现在某些情况下后退按钮导航错误。我不能使用history.back（）因为我的后退按钮变为主视图中的菜单链接。

所以我的问题是如何在控制器中获得之前的路由路径，或者是实现这一点的更好方法？

我创建了一个Plunker公司证明我的问题。请检查一下。

Answer 1

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

模板：

后退</a>

该模块：

myModule.run（函数（$rootScope，$location）{var历史=[]；$rootScope$on（'$routeChangeSuccess'，function（）{历史推送（$location.$$path）；});$rootScope.back=函数（）{var prevUrl=history.length>1？历史记录。拼接（-2）[0]：“/”；$location.path（prevUrl）；};});

Answer 2

使用$locationChangeStart或$locationChangeSuccess事件，第三个参数：

$scope$on（“$locationChangeStart”，函数（evt，absNewUrl，absOldUrl）{console.log（'start'，evt，absNewUrl，absOldUrl）；});$scope$on（'$locationChangeSuccess'，函数（evt，absNewUrl，absOldUrl）{console.log（'success'，evt，absNewUrl，absOldUrl）；});

Answer 3

在html中：

返回</a>

在主控制器上：

$scope.go_back=函数（）{$window.history.back（）；};

当用户单击“返回”链接时，会调用控制器函数，它将返回到上一条路线。

Answer 4

@andresh对我来说，locationChangeSuccess比routeChangeSu成功更有效。

//使用此back（）调用返回到上一阶段var历史=[]；$rootScope$on（'$locationChangeSuccess'，function（）{历史推送（$location.$$path）；});$rootScope.back=函数（）{var prevUrl=history.length>1？历史记录。拼接（-2）[0]：“/”；$location.path（prevUrl）；历史=[]//返回后删除历史数组};

Answer 5

这是我当前如何在$rootScope:

运行（['$rootScope'，函数（$rootScope）{$rootScope$on（'$locationChangeStart'，function（）{$rootScope.previousPage=位置路径名；});}]);

Answer 6

您需要将事件侦听器耦合到Angular 1.x中的$rootScope，但您可能应该通过不在$rootScoper上存储以前位置的值来为您的代码提供一些未来的证明。存储价值的更好地方是服务：

var app=角度模块（'myApp'，[]）.service（'locationHistoryService'，函数（）{返回{上一个位置：null，存储：功能（位置）{this.previousLocation=位置；},获取：函数（）{return this.previousLocation；}}).run（[“$rootScope”，“locationHistoryService”，function（$location，locationHistoryService）{$rootScope$on（“$locationChangeSuccess”，函数（e，newLocation，oldLocation）{locationHistoryService.store（旧位置）；});}]);

Answer 7

只需记录：

回调参数上一条路线具有名为的属性$路线这与$路线服务。不幸的是当前路线参数没有关于当前路线的太多信息。

为了克服这个问题，我尝试了一些类似的方法。

$routeProvider。when（'/'{控制器：。。。，templateUrl:“…”，routeName:“主页”}).when（“/menu”{控制器：。。。，templateUrl:“…”，routeName：“站点菜单”})

请注意，在上述路由配置中，有一个名为路由名称已添加。

app.run（函数（$rootScope，$route）{//在rootScope上绑定`$routeChangeSuccess`事件，这样我们就不需要//绑定各个控制器。$rootScope$on（“$routeChangeSuccess”，函数（currentRoute，previousRoute）{//这将提供我们在配置路由时定义的自定义属性。console.log（$route.current.routeName）})})

Answer 8

上述代码的修改：

$scope$on（“$locationChangeStart”，函数（evt，absNewUrl，absOldUrl）{console.log（'prev path:'+absOldUrl.$$route.originalPath）；});