我问一个与此问题类似的问题: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。
有任何想法吗?
所述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>'; } }); }] })