2015-01-27 23 views
0

我試圖創建一個抽象根狀態並在其中激活子狀態之前解析其中的所有數據 - 通過使用ui-router從事異步數據加載(來自服務器)事先激活任何路線/國家等如何獲取ui-router stateHelper工作

爲此,我試圖使用ui-router.stateHelper - 如this answer建議。

我有ui-router$stateProvider正常工作之前在試圖stateHelper

以前 app.js文件ui-router代碼看起來是這樣的:

myApp.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('page1', { 
     url : '/page1', 
     templateUrl : 'templates/page1.html' 
    }) 
    .state('page2', { 
     url : '/page2', 
     templateUrl : 'templates/page2.html' 
    }) 
}); 

我的index.html樣子:

<div> 
    <a ui-sref="page1"><img src="images/page1_button.jpg></a> 
    <a ui-sref="page2"><img src="images/page2_button.jpg></a> 
</div> 
<div id="template_contents" ui-view></div> 

它工作正常沒有問題(除了狀態和控制器會加載之前主myApp.run完成 - 即使我的.run功能有承諾等)

由於'更新'stateHelper,我的app.js看起來像:

myApp.config(function($urlRouterProvider, stateHelperProvider) { 
    stateHelperProvider 
     .state({ 
       name: 'root', 
       template: '<ui-view/>', 
       abstract: true, 
       resolve: { 
        // haven't got to this point yet :-/ 
       }, 
       children: [ 
        { 
         name: 'page1', 
         url : '/page1', 
         templateUrl : 'templates/page1.html' 
        }, 
        { 
         name: 'page2', 
         url : '/page2', 
         templateUrl : 'templates/page2.html' 
        }, 
       ] 
     }); 
}); 

現在的應用程序不改變狀態/加載模板,它給我下面的控制檯錯誤:
Error: Could not resolve 'page1' from state ''
什麼導致這個錯誤?

使用stateHelper時,html和ui-sref必須更新/更改嗎? (相當缺乏文檔中提到的沒有......缺乏信息指示HTML方應該是一樣的ui-router格式)

+1

只是嘗試沒有stateHelper – 2015-01-27 01:26:17

回答

3

我已經採取了你的代碼,並創建了一個Plunker:http://plnkr.co/edit/eOWpYKFRL3PTGHmU2txi?p=preview 沒有什麼錯的代碼你發佈了,所以我猜你的問題在於你沒有發佈的HTML。我最好的猜測是,你的(確實很少)文檔中忽略了這個部分:

By default, all state names are converted to use ui-router's dot notation (e.g. parentStateName.childStateName). This can be disabled by calling .state() with an optional second parameter of true.

雖然下面將通常與UI的路由器工作:

<a ui-sref="page1">Page 1</a> 
<a ui-sref="page2">Page 2</a> 

它不會在組合與statehelper,你需要使用dotnotation全Statename的,這意味着,包括父母的名字:

<a ui-sref="root.page1">Page 1</a> 
<a ui-sref="root.page2">Page 2</a> 
+0

感謝 - 我竟然想通(KIN da還沒有測試過) - 遵循@Matt Way的建議,並使用默認的'$ stateProvider'來寫它,其中子元素由點符號定義(而不是'stateHelper') - 然後我必須在html中使用......目前這個搶劫犯並不在工作,但一旦我確認我會接受你的答案! – goredwards 2015-01-28 07:38:18

+0

我很抱歉不知道那個Plunk出了什麼問題,但現在應該開始工作了。 – iH8 2015-01-28 10:00:46

+0

好東西!感謝那。有人應該更新'stateHelper'文檔 - 尤其是因爲它是官方的'ui-router' [wiki]推薦的第二個選項(https://github.com/angular-ui/ui-router/wiki/Nested -States-%26-嵌套查看)。 – goredwards 2015-01-28 16:58:46