Question

在AngularJS中使用ui-view时，我试图在嵌套视图中使用URL参数。

对于给定类型的实体，我希望能够在导航到url / entities时显示所有实体，但如果我转到entities / ofcategory，我还希望只看到给定类型的实体/分类名称。最后，我还希望能够导航到/ entities / details / entityName以查看一个实体的详细信息。

这种结构可能吗？

这是我的ui-routercode：

app.config(['$stateProvider', function ($stateProvider) {
 $stateProvider
        .state('entities', {
            url: '/entities',
            templateUrl: 'app/entities/views/entities.html'

        })
       .state('entities.ofcategory', {
            url: '/ofcategory/:categoryName',
            templateUrl: 'app/entities/views/entities.ofcategory.html'          
        }
        .state('entities.details', {
            url: '/details/:entityName',
            templateUrl: 'app/entities/views/entities.details.html'         
        });
}]);

如果我导航到entities / ofcategory / aname或/ entities / details / aname，我输入常规实体控制器而不是category或detailsController

Answer 1

一个选项是添加一个抽象状态，作为所有实体状态的父级。在这种情况下，您的所有网址都会变为相对到此父状态。请注意，您必须在抽象状态的模板中定义 ui-view ，因此它可用于加载子模板。

app.config(['$stateProvider', function ($stateProvider) {
 $stateProvider
        .state('entities', {
            url: '/entities',
            abstract: true,
            templateUrl: 'app/entities/views/entities.html'
        })
        .state('entities.all', {
            url: '/',
            templateUrl: 'app/entities/views/entities.all.html'
        })
        .state('entities.ofcategory', {
            url: '/:categoryName',
            templateUrl: 'app/entities/views/entities.ofcategory.html'          
        }
        .state('entities.details', {
            url: '/details/:entityName',
            templateUrl: 'app/entities/views/entities.details.html'         
        });
}]);

应用程序/实体/视图/ entities.html：

<div>
   <h1>Entities<h1>
   <div ui-view></div>
</div>

AngularJS ui-router具有不同的URL参数

1 个答案: