2013-12-15 123 views
8

我有這樣的狀態結構:有父狀態默認子狀態使用UI路由器

.state('places', 
{ 
    url:'/places', 
    controller:'PlacesController', 
    templateUrl:'views/places.html' 
}) 
.state('places.city', 
{ 
    url:'/:city', 
    templateUrl:function(stateParams) 
    { 
     return 'views/places/'+stateParams.city+'.html'; 
    } 
}); 

它可以很好地除了當網址就是/places沒有後一個城市。
如何在兒童狀態下爲templateUrl設置默認值?

我在想最好的方法是從PlacesController設置UI視圖,但這似乎不可能。

+0

,你可以設置一個的jsfiddle? –

+0

對不起,沒有語法高亮設置。應該是乾淨的現在閱讀。 – Francisc

+0

[angularjs ui-router default child state]可能重複(http://stackoverflow.com/questions/17001589/angularjs-ui-router-default-child-state) –

回答

0

如角UI Wiki頁面說:

有激活的狀態三種主要方式:

  1. 調用$ state.go()。高級便利方法。
  2. 單擊包含ui-sref指令的鏈接。
  3. 導航到與狀態關聯的網址。

https://github.com/angular-ui/ui-router/wiki#activating-a-state

+6

不應接受此答案。它沒有回答這個問題,這是關於在調用父狀態時默認爲子狀態的問題。 – XML

+1

+1爲答案,我有同樣的問題作爲OP,它似乎從父母調用一個孩子是不正確的思想,只是訪問子路徑有相同的影響,沒有涉及思維。 – HappyCoder

+0

這不是通過它的孩子委託狀態的解決方案! –

15

嘗試定義設置爲空字符串的URL另一個子狀態:

.state('places.default', { 
    url: '', 
    templateUrl: '...' 
} 

然後加入abstract: true父狀態。

+1

嗯,這很聰明。如果有直接更改'ui-view'模板URL的方法,我會很高興。 – Francisc

+0

我不知道ui.router中有這樣的函數。 –

+0

謝謝,亞倫。 [extra chars] – Francisc

7

,而無需在您的狀態配置中的任何改變,你可以直接把你的默認模板ui-view標籤之間在你的HTML:

<!-- places.html --> 
<div ui-view> 
    <h1>Please choose a place</h1> 
</div> 

<!-- london.html --> 
<h1>London is amazing!</h1> 

現在,當您導航到/places ,你會看到「請選擇一個地方」的信息,當你導航到/places/london時,你會看到「倫敦太棒了!」。

+0

繁榮!正是我需要的,謝謝! –

1

由亞倫說,你可以使用$狀態導航到一個默認的子狀態,但這裏有一個陷阱說假設你有超過1名兒童:

.state('places', 
    { 
     url:'/places', 
     controller:'PlacesController', 
     templateUrl:'views/places.html' 
    }) 
    .state('places.city', 
    { 
     url:'/:city', 
     templateUrl:function(stateParams) 
     { 
      return 'views/places/'+stateParams.city+'.html'; 
     } 
    }) 
    .state('places.child2', 
    { 
     url:'/:city2', 
     templateUrl:function(stateParams) 
     { 
      return 'views/places/'+stateParams.child2+'.html'; 
     } 
    }); 

和你父控制器PlacesController你有$ state.go(places.city)然後,只要父控制器即PlacesController被調用,你將被重定向到城市狀態。 所以如果有人在child2狀態並按下刷新按鈕,父控制器將被調用,他將被重定向到城市,這不是你想要的!

ANS:所以,你可以這樣做,即如果該人是在父母的狀態重定向之前檢查當前的狀態然後重定向到任何默認的子狀態,但如果此人在任何孩子的狀態,那麼請不要做父控制器中的重定向: -

if($state.current.name == "places"){ 
    $state.go('places.city'); 
} 

希望這有助於!父狀態

.state('places', 
{ 
    url:'/places', 
    resolve: { default: function($state) { 
     if ($state.is('places')) $state.go('places.city', { url: 'london'}) 
    }} 
    controller:'PlacesController', 
    templateUrl:'views/places.html' 
}) 
.state('places.city', 
{ 
    url:'/:city', 
    templateUrl:function(stateParams) 
    { 
     return 'views/places/'+stateParams.city+'.html'; 
    } 
}); 

檢查語法錯誤

+0

作爲註釋,第二個代碼塊半身像在'PlacesController' –

1

使用的決心,我已經習慣了的CoffeeScript :)

相關問題