Question

我问这个问题类似的问题：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', {
            url: '',
            templateUrl: 'second.html',
            controller: 'SecondController'
        });

我设置了Resolve来从一个宁静的服务中获取实际的实体。似乎每件事情都有效，直到我真正根据类型进入transitionTo。

转换似乎有效，除了重新触发并且getEntity失败，因为id为null。

我已经尝试将id发送到transitionTo调用，但是它仍然尝试进行第二次解析，这意味着实体从其余服务中获取两次。

似乎正在发生的事情是，在onEnter处理程序中，状态还没有实际改变，所以当转换发生时，它认为它正在转换到一个全新的状态而不是一个子状态。这进一步证明了，因为我删除了实体。从transitionTo中的州名，它认为当前的状态是root，而不是home。这也阻止了我使用＆＃39; go＆＃39;而不是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'
        });

Answer 3

我最终让家庭控制器成为第一个和第二个兄弟，而不是父母，然后让家里的控制器根据解决的结果做第一个或第二个$ state.go。

Answer 4

在ui-route中使用经验证的条件视图代码

$stateProvider.state('dashboard.home', {
        url: '/dashboard',
        controller: 'MainCtrl',
       // templateUrl: $rootScope.active_admin_template,
        templateProvider: ['$stateParams', '$templateRequest','$rootScope', function ($stateParams, templateRequest,$rootScope) {
          var templateUrl ='';
          if ($rootScope.current_user.role == 'MANAGER'){
            templateUrl ='views/manager_portal/dashboard.html';
          }else{
            templateUrl ='views/dashboard/home.html';
          }
          return templateRequest(templateUrl);
        }]
      });

Angular ui-router完成条件视图

4 个答案: