angular ui路由器如何等待子状态被加载答案

【问题标题】：angular ui router how to wait for child states to be loadedangular ui路由器如何等待子状态被加载
【发布时间】：2015-07-09 05:41:00
【问题描述】：

我在将子状态加载到抽象的真实父状态时遇到问题。

这是我的父母状态

.state('main', {
            url: '/main',
            templateUrl: 'templates/main.html',
            abstract: true
        })

这是子状态

.state('main.panels', {
            views: {
                'ticketsPanel': {
                    templateUrl: 'templates/ticketsPanel.html'
                },
                'productsPanel': {
                    templateUrl: 'templates/productsPanel.html'
                },
                'categoriesPanel': {
                    templateUrl: 'templates/categoriesPanel.html'
                }
            }
        })

我登录后有一个登录页面，我想加载所有 3 个子视图。

这是处理登录的代码。

.controller('loginController', function($scope, Authentication, $log, $state){
$scope.formData = {};

$scope.processForm = function(){
    Authentication.login($scope.formData);

    var promise = Authentication.getEmployee();

    promise.then(function(respond){
        localStorage.setItem('employee', JSON.stringify(respond));
        $state.go('main.panels');
    })

}

})

$state.go('main.panels') 激活主状态父级的子状态，但我遇到的问题是 DOM 显示元素已加载，但我只能在其中部分看到它们我的观点。就像他们没有完全加载一样。

我的问题是如何等待 main.panels 中的所有视图完全加载，然后再转换到该视图。

【问题讨论】：

标签： angularjs

【解决方案1】：

我们确实有 'resolve' 属性，可以在每个状态（或视图）的定义中提供您想要加载的任何内容。所以 angular-ui-router 所做的是它首先解析“resolve”属性，然后才在浏览器上呈现 HTML 模板。

您可以通过以下方式定义子状态：

.state('main.panels', {
            views: {
                'ticketsPanel': {
                    templateUrl: 'templates/ticketsPanel.html',
                    resolve: function(LoginService){return LoginService};
                },
                'productsPanel': {
                    templateUrl: 'templates/productsPanel.html',
                    resolve: function(LoginService){return LoginService};
                },
                'categoriesPanel': {
                    templateUrl: 'templates/categoriesPanel.html',
                    resolve: function(LoginService){return LoginService};
                }
            }
        })

您甚至可以阅读以下链接了解更多详情：

https://github.com/angular-ui/ui-router/wiki

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#inherited-resolved-dependencies

http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/

已经详细解释过了。希望这会有所帮助:)

【讨论】：

我在 ui-router 中读到了“resolve”。它实际上是相对于状态解析的。因此，您实际上可以在状态本身中仅提供一次“解决”，而不是在每个视图中具有相同的解析。如果这听起来令人困惑，请告诉我:)

【解决方案2】：

嵌套状态也使视图嵌套，这意味着路由器将在父模板中查找命名的 ui-view 并将其呈现在那里，因为这不是你想要做的，所以你必须隐式声明它是父视图（绝对与相对）如下：

.state('main.panels', {
        views: {
            'ticketsPanel@': {
                templateUrl: 'templates/ticketsPanel.html',
                resolve: function(LoginService){return LoginService};
            },
            'productsPanel@': {
                templateUrl: 'templates/productsPanel.html',
                resolve: function(LoginService){return LoginService};
            },
            'categoriesPanel@': {
                templateUrl: 'templates/categoriesPanel.html',
                resolve: function(LoginService){return LoginService};
            }
        }
    })

'productsPanel@' 就像说 'productsPanel' @ 什么都没有，表示上层父视图或根视图。

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

【讨论】：