Question

我在AngularJS应用程序中使用UI-Router，我有这样的路线：

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-view）。如果你去/messages/1，你会看到一个对话。

当你转到/messages时，你应该自动被重定向到最近的对话，因为只显示列表和“从列表中选择一个对话”这样的消息就是愚蠢的：）

问题是我不知道该怎么做。如果我在MessagesListCtrl中有一些重定向逻辑，那么你总会有一个延迟，你看到空的登陆页面然后被重定向。我不能这样做一个解决功能，因为它们也被子状态使用。当然其他人也有同样的问题，他们是如何解决这个问题的？

Answer 1

将messages设为抽象状态，保留resolve，然后将templateUrl和controller移至新状态messages.list。然后，为您的<ui-view />状态创建一个父messages，并为其添加一个templateUrl，其中包含您希望用户在加载邮件时看到的内容。应该工作。

Answer 2

在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显示完全相同的模板并使用相同的控制器。决心有点不同。我正在跟踪对话中的selectedId，因此我可以在列表中标记活动对话。

自动重定向到子状态

2 个答案: