Angularjs路由无法正常工作

时间:2014-10-10 08:52:02

标签: javascript php jquery angularjs mvvm

angular.module('Stations', ['ngRoute'])      
  .config(function ($routeProvider) {
     $routeProvider
     .when('/documents/:stationId', {
               templateUrl: '/Scripts/Modules/checklist/views/index.html',
               controller: 'checklistController'
           })
     .when('/documents/details', {
                templateUrl: '/Scripts/Modules/checklist/views/details.html',
                controller: 'checklistDetailsController'
            })
});

现在,如果我输入网址/stations#/documents/4,它会向文档视图发送内容并显示该网站中的所有文档。但是如果我转到网址stations#/documents/details?Id=3&type=note,它仍会转到文档主视图而不是详细信息视图。

你能否告诉我一些我做错了什么?

4 个答案:

答案 0 :(得分:1)

此处路由器认为details:stationId

因此它匹配第一条路线/documents/:stationId,并将值details影响到stationId参数。

您应该将详细信息页面的路线更改为

.when('/details', {

或者如果你想说stationId必须是一个数字,你可以使用angular ui-router做到这一点: https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters

答案 1 :(得分:0)

可能你应该改变路线

.when('/documents/details/:id/:note', {... });

这对于在控制器等中使用$routeParams获取参数很有用。

答案 2 :(得分:0)

因为匹配的第一个路由被执行,并且该URL中的details被视为stationId。 首先放置第二条路线,使其首先匹配。像这样。

angular.module('Stations', ['ngRoute']).config(function ($routeProvider) {
 $routeProvider
 .when('/documents/details', {
            templateUrl: '/Scripts/Modules/checklist/views/details.html',
            controller: 'checklistDetailsController'
        })
 .when('/documents/:stationId', {
           templateUrl: '/Scripts/Modules/checklist/views/index.html',
           controller: 'checklistController'
       })

 });

但这意味着,如果您的stationId有任何机会是'详细信息',那么它将匹配第一条路线而不是第二条路线。所以考虑避免这种配置。

答案 3 :(得分:-1)

你需要在路线中加入参数:

.when('/documents/details:documentId', {
    templateUrl: '/Scripts/Modules/checklist/views/details.html',
    controller: 'checklistDetailsController'
});

请参阅:https://docs.angularjs.org/api/ngRoute/service/ $ route