角度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路由器如何等待子狀態被加載

回答

相關問題