Question

我有这种状态结构：

.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-view，但这似乎是不可能的。

Answer 1

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

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

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

Answer 2

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

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

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

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

Answer 3

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

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

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

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

希望这有帮助！

Answer 4

在父状态

上使用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';
    }
});

检查语法错误，我习惯了coffeescript：）

Answer 5

如Angular-UI Wiki页面中所述：

激活州有三种主要方式：


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

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

导航至与州相关联的网址。

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

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

5 个答案: