Question

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

这是我的父州

.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（＆＃39; main.panels＆＃39;）激活主状态父级的子状态，但我遇到的问题是DOM显示元素已加载但是我只能在我看来部分看到它们。就像他们没有满载一样。

我的问题是如何在转换到该视图之前等待main.panels中的所有视图完全加载。

Answer 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/

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

Answer 2

嵌套状态也会使视图嵌套，这意味着路由器将在父模板中查找命名的ui-view并将其呈现在那里，因为那不是你想要做的事情，你有隐含地声明它是父视图（绝对vs相对），如：

.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};
            }
        }
    })

＆＃39; productsPanel @＆＃39;就像说产品面板＆＃39; @ nothing表示上部父视图或根视图。

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

angular ui router如何等待加载子状态

2 个答案: