angularjs – Angular ui-router完成条件视图

发布时间：2020-12-17 09:41:26 所属栏目：安全来源：网络整理

导读：我问这个问题的一个类似的问题： UI Router conditional ui views?,但我的情况有点复杂,我似乎无法得到所提供的答案. 基本上,我有一个url可以渲染两种非常不同的方式,这取决于url指向的实体类型. 这是我正在尝试的 $stateProvider .state('home',{ url : '/{

我问这个问题的一个类似的问题： UI Router conditional ui views?,但我的情况有点复杂,我似乎无法得到所提供的答案.

基本上,我有一个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',templateUrl: 'second.html',controller: 'SecondController'
        });

我设置了一个解决方案,从一个安静的服务中获取实际的实体.
每个事情似乎都在工作,直到我实际到达到基于类型的转换.

转换似乎有效,除了解决方案重新启动,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>';
        }
    });
  }]
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!