Angularjs 路由无法正常工作


Angularjs routing not working correctly

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

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

你能给我一个提示,说明我做错了什么吗?

路由器认为details是一个:stationId

因此,它匹配第一个路由/documents/:stationId,并影响detailsstationId参数的值。

应将详细信息页面的路由更改为

.when('/details', {

或者如果你想说stationId一定是一个数字,你可以用角度ui路由器来做到这一点:https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters

可能你应该把路线改成

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

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

因为执行第一个匹配的路由,并且该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是"细节"这个词,那么它将与第一条路线匹配,而不是第二条路线。因此,请考虑避免这种类型的配置。

您需要在路由中输入参数:

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

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