角度ui路由器如何等待子状态被加载

这是我的父状态

.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中的所有视图在我转换到该视图之前完全加载。

来源

2015-07-04 user3862830

无论您想要加载什么，我们都可以在每个状态（或视图）的定义中提供“解析”属性。所以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/

已经详细解释了。希望这有助于:)

来源

2015-07-04 18:11:57

我读到的UI路由器 '解析'。它实际上解决了与国家相关的问题。所以，不是每个视图都有相同的解决方案，你实际上只能在状态中提供'解决'一次。让我知道如果这听起来令人困惑:) –

嵌套状态也使视图嵌套，这意味着路由器将在父模板内寻找一个命名的ui-view并将其呈现在那里，因为这不是你想要做的事情隐含指出它的父视图（绝对VS相对的），像这样：

.state('main.panels', { 
     views: { 
      '[email protected]': { 
       templateUrl: 'templates/ticketsPanel.html', 
       resolve: function(LoginService){return LoginService}; 
      }, 
      '[email protected]': { 
       templateUrl: 'templates/productsPanel.html', 
       resolve: function(LoginService){return LoginService}; 
      }, 
      '[email protected]': { 
       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

来源

2015-07-05 14:10:10 OfirYaron

角度ui路由器如何等待子状态被加载

回答

相关问题