角UI路由器完成条件视图

Question

我问一个与此问题类似的问题：UI路由器有条件的ui视图？，但我的情况要复杂一些，似乎无法获得所提供的答案。

基本上，我可以使用两种非常不同的方式呈现url，具体取决于url指向的实体的类型。

这是我目前正在尝试的

    $stateProvider
        .state('home', {
            url : '/{id}',
            resolve: {
                entity: function($stateParams, RestService) {
                    return RestService.getEntity($stateParams.id);
                }
            },
            template: 'Home Template <ui-view></ui-view>',
            onEnter: function($state, entity) {
                if (entity.Type == 'first') {
                    $state.transitionTo('home.first');
                } else {
                    $state.transitionTo('home.second');
                }
            }
        })
        .state('home.first', {
            url: '',
            templateUrl: 'first.html',
            controller: 'FirstController'
        })
        .state('home.second', {
            url: '',
            templateUrl: 'second.html',
            controller: 'SecondController'
        });

我设置了一个解析程序，以从一个静态服务中获取实际实体。直到我根据类型实际到达transitionTo为止，所有事情似乎都在起作用。

转换似乎可以正常工作，但解析会重新触发并且getEntity会失败，因为id为null。

我尝试将id发送给transitionTo调用，但是随后它仍然尝试进行第二次解析，这意味着该实体从其余服务中提取了两次。

似乎正在发生的事情是，在onEnter处理程序中，状态实际上尚未更改，因此，当发生过渡时，它认为它正在过渡到一个全新的状态，而不是子状态。这进一步得到证明，因为当我删除实体时。从transitionTo中的状态名称中，它认为当前状态是root，而不是home。这也阻止了我使用“
go”而不是transitionTo。

有任何想法吗？

Answer 1

所述templateUrl可以是函数，以及因此你检查的类型和返回不同的视图，在该视图，而不是作为状态配置的一部分限定的控制器。您无法将参数注入templateUrl，因此可能必须使用templateProvider。

$stateProvider.state('home', {
  templateProvider: ['$stateParams', 'restService' , function ($stateParams, restService) {
    restService.getEntity($stateParams.id).then(function(entity) {
        if (entity.Type == 'first') {
              return '<div ng-include="first.html"></div>;
        } else {
              return '<div ng-include="second.html"></div>';
        }
    });
  }]
})