我正在设置一个简单的 angularjs 应用程序来管理组,其中我使用 ui-router 进行嵌套路由。
var groupsApp = angular.module('groupsApp', [
'ui.router',
]);
每个小组都有参与者和项目。 /#/groups
页面使用 ui-sref
指令显示一个列表,其中包含指向每个组的链接:
<ul>
<li ng-repeat="group in groups">
<a ui-sref="group.participants({group_id: {{group.id}}})">{{group.name}}</a>
</li>
</ul>
状态导航配置如下:
groupsApp.config(
function($stateProvider) {
$stateProvider
.state('groups', {
url: '/groups',
templateUrl: 'partials/groups.html'
})
.state('group', {
abstract: true,
url: '/:group_id',
templateUrl: 'partials/group.html',
})
.state('group.participants', {
url: '/participants',
templateUrl: 'partials/participants.html',
})
.state('group.programm', {
url: '/programm',
templateUrl: 'partials/program.html'
})
});
我使用以下 Controller :
var myAppControllers = angular.module('myAppControllers', []);
myAppControllers.controller('GroupController', ['$scope',
function ($scope) {
$scope.groups = [
{'id': 'group1',
'name': 'My first group',
{'id': 'group2',
'name': 'My secord group',
];
}]);
group
状态是抽象的,group_id
决定了 url。对于 ID 为 group1 和 group2 的组,可能的 url 为:
/#/group1/participants
/#/group1/program
/#/group2/participants
/#/group2/program
使用 ui-sref
指令,我想导航到群组的参与者页面:
<a ui-sref="group.participants({group_id: {{group.id}}})">{{group.name}}</a>
因此,我导航到 group.participants
状态并传递 group_id
参数来指示哪个组。然而,这是父状态组
的参数。单击该链接会产生以下 url:
/#//participants
显然父类group
没有获取到这个参数。有谁知道如何实现这一目标吗?
附:我现在意识到问题可能是 Angular 表达式的嵌套:
{group_id: {{group.id}}}
这是允许的吗?
最佳答案
我创建了一个正在运行的 plunker,它应该满足您的需求:here
其中一项更改:
<ul>
<li ng-repeat="group in groups">
<!--
<a ui-sref="group.participants({group_id: {{group.id}}})">{{group.name}}</a>
-->
<a ui-sref="group.participants({group_id: group.id})">{{group.name}}</a>
</li>
</ul>
还有state
定义的片段(实际上与问题中的相同,但正在运行)
组定义:
$stateProvider
.state('groups', {
url: '/groups',
template: '<ul> ' +
' <li ng-repeat="group in groups"> ' +
' <a ui-sref="group.participants({group_id: group.id})">' +
' {{group.name}}</a> ' +
' </li> ' +
' </ul>',
controller:['$scope','$state',
function ( $scope , $state){
$scope.groups = [{name : "My first group" , id : "group1"}
, {name : "My second group", id : "group2"}];
}],
})
这是group
abstract
状态。它确实可以访问 $stateParams
并将它们存储在范围中。所有子州也都可以访问它。
.state('group', {
abstract: true,
url: '/:group_id',
template: '<div>' +
' <h4> group: {{group_id}} <a ui-sref="groups">back</a></h4>' +
' <div ui-view></div>' +
' </div>',
controller:['$scope','$state','$stateParams',
function ( $scope , $state , $stateParams){
$scope.group_id = $stateParams.group_id;
$scope.params = $stateParams;
$scope.state = $state.current;
$scope.showJson = function(x) { return JSON.stringify(x, undefined, 2); };
}],
})
抽象组
的子状态,可以使用已经为它们准备的内容
.state('group.participants', {
url: '/participants',
template: '<div>' +
' <h5>params</h5> ' +
' <pre>x{{showJson(params)}}</pre>' +
' <h5>state</h5> ' +
' <pre>{{showJson(state)}}</pre>' +
' </div>',
})
.state('group.programm', {
url: '/programm',
template: '<div>programm</div>'
})
;
关于angularjs - 使用 ui-sref 指令和 ui-router 将变量传递给抽象父状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23711714/