Angularjs 自动重定向到子状态
我在AngularJS应用程序中使用UI路由器,我有如下路线:Angularjs 自动重定向到子状态,angularjs,angular-ui-router,Angularjs,Angular Ui Router,我在AngularJS应用程序中使用UI路由器,我有如下路线: angular.module('app.messages').config(function($stateProvider, ACCESSLEVELS) { $stateProvider.state('messages', { url: '/messages', templateUrl: 'messages/list.html', controller: 'MessagesLi
angular.module('app.messages').config(function($stateProvider, ACCESSLEVELS) {
$stateProvider.state('messages', {
url: '/messages',
templateUrl: 'messages/list.html',
controller: 'MessagesListCtrl as controller',
resolve: {
'conversations': function(Restangular) {
return Restangular.all('conversations').getList();
}
}
});
$stateProvider.state('messages.detail', {
url: '/{conversationId:[0-9]{1,8}}',
templateUrl: 'messages/conversation.html',
controller: 'MessagesDetailCtrl as controller',
resolve: {
'conversation': function(conversations, $stateParams) {
return conversations.get($stateParams.conversationId);
}
}
});
});
因此,如果您转到/messages
,它将显示您的对话列表(它包含一个ui视图,用于查看详细信息)。如果您转到/messages/1
,则可以查看单个对话
当您转到/messages
时,您应该自动重定向到最近的对话,因为仅仅显示列表和类似“从列表中选择对话”的消息是愚蠢的:)
问题是我不知道怎么做。如果我在MessagesListCtrl中有一些重定向逻辑,那么您总是会有一个延迟,您会看到空的登录页,然后被重定向。我不能使用解析函数,因为子状态也使用这些函数。当然其他人也有同样的问题,他们是如何解决的?将消息
设为抽象状态,保留解析
,并将模板URL
和控制器
移动到新状态,消息。列表
。然后,为您的消息
状态创建一个父
,并为其提供一个模板URL
,其中包含您希望用户在加载消息时看到的内容。应该有效。根据上面Nate的答案解决:
angular.module('app.messages').config(function($stateProvider) {
$stateProvider.state('messages', {
abstract: true,
templateUrl: 'messages/list.html',
controller: 'MessagesListCtrl as controller',
resolve: {
'conversations': function(Restangular) {
return Restangular.all('conversations').getList();
}
}
});
$stateProvider.state('messages.list', {
url: '/messages',
templateUrl: 'messages/conversation.html',
controller: 'MessagesDetailCtrl as controller',
resolve: {
'conversation': function(conversations) {
var lastId = _.last(_.sortBy(conversations, 'lastwrite')).id;
conversations.selectedId = lastId;
return conversations.get(lastId);
}
}
});
$stateProvider.state('messages.detail', {
url: '/messages/{conversationId:[0-9]{1,8}}',
templateUrl: 'messages/conversation.html',
controller: 'MessagesDetailCtrl as controller',
resolve: {
'conversation': function(conversations) {
conversations.selectedId = $stateParams.conversationId;
return conversations.get($stateParams.conversationId);
}
}
});
});
基本上messages.list和messages.detail显示完全相同的模板并使用相同的控制器。解决方法只是有点不同。我正在跟踪对话中所选的EDID,以便在列表中标记活动对话。与可选参数结合使用可能会更容易些?如果没有$stateParams.conversationId,则使用conversations数组中的最后一个。