Angular ui-router完成条件视图

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

我设置了Resolve来从一个宁静的服务中获取实际的实体.似乎每件事情都有效,直到我真正根据类型进入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>';
        }
    });
  }]
})

Answer 2

您还可以执行以下操作:

$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') {
                    $timeout(function() {
                            $state.go('home.first');
                        }, 0);
                } else {
                    $timeout(function() {
                            $state.go('home.second');
                        }, 0);
                }
            }
        })
        .state('home.first', {
            url: '',
            templateUrl: 'first.html',
            controller: 'FirstController'
        })
        .state('home.second', {
            url: '',
            templateUrl: 'second.html',
            controller: 'SecondController'
        });