使用ui-router将父状态默认为子状态

I have this state structure:

我有这种状态结构：

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

It works nicely except when the URL is simply /places without a city after it.
How can I have a default value for templateUrl in the child state?

它工作得很好，除非URL只是/后面没有城市的地方。如何在子状态中为templateUrl设置默认值？

I'm thinking the best way would be to set the ui-view from PlacesController, however that doesn't seem to be possible.

我认为最好的方法是从PlacesController设置ui-view，但这似乎不可能。

5 个解决方案

#1

Try defining another child state with the URL set to an empty string:

尝试使用设置为空字符串的URL定义另一个子状态：

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

Then add abstract: true to the parent state.

然后将abstract：true添加到父状态。

#2

Without needing any change in your states configuration, you can put your default template directly between the ui-view tags in your HTML:

无需更改状态配置，您可以将默认模板直接放在HTML中的ui-view标记之间：

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

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

Now when you navigate to /places, you will see the "Please choose a place" message, and when you navigate to /places/london, you will see "London is amazing!".

现在，当您导航到/ places时，您将看到“请选择一个地方”消息，当您导航到/ places / london时，您将看到“伦敦太棒了！”。

#3

as stated by Aaron you can use $state to navigate to a default child state but here there is a catch say suppose you have more than 1 child :

如Aaron所述，你可以使用$ state导航到一个默认的子状态，但是这里有一个说法，假设你有一个以上的孩子：

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

and in you parent controller PlacesController you have $state.go(places.city) then whenever the parent controller i.e. PlacesController is invoked you will be redirected to city state. So if someone is on child2 state and presses a refresh button then parent controller will be invoked and he will be redirected to city which is not what you want!

并且在你的父控制器PlacesController中你有$ state.go（places.city）然后每当调用父控制器，即PlacesController时，你将被重定向到城市状态。因此，如果某人处于child2状态并按下刷新按钮，则将调用父控制器，并且他将被重定向到不是您想要的城市！

ANS: So you can check for the current state before doing a redirection i.e. if the person is in parent state then redirect to any default child state but if the person is in any of the child states then do not do the redirection in the parent controller :-

ANS：所以你可以在进行重定向之前检查当前状态，即如果该人处于父状态然后重定向到任何默认子状态，但如果该人处于任何子状态，则不要在父控制器中进行重定向： -

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

hope this helps!

希望这可以帮助！

#4

Use resolve on the parent state

在父状态上使用resolve

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

Check for syntax error, I'm used to coffeescript :)

检查语法错误，我习惯了coffeescript :)

#5

As stated in the Angular-UI Wiki page:

如Angular-UI Wiki页面中所述：

There are three main ways to activate a state:

激活状态有三种主要方式：

Call $state.go(). High-level convenience method.

调用$ state.go（）。高级便利方法。

Click a link containing the ui-sref directive.

单击包含ui-sref指令的链接。

Navigate to the url associated with the state.

导航到与州关联的网址。

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

#1