Angular ui-router 完成条件视图答案

【问题标题】：Angular ui-router to accomplish a conditional viewAngular ui-router 完成条件视图
【发布时间】：2014-09-22 17:56:56
【问题描述】：

我在问一个与这个问题类似的问题：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 为空。

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

似乎正在发生的是，在 onEnter 处理程序中，状态实际上还没有改变，所以当转换发生时，它认为它正在转换到一个全新的状态而不是一个子状态。这进一步证明了，因为当我删除实体时。从transitionTo中的状态名称来看，它认为当前状态是root，而不是home。这也阻止了我使用 'go' 而不是 transitionTo。

有什么想法吗？

【问题讨论】：

可能需要控制器来初始化id

标签： angularjs angular-ui angular-ui-router

【解决方案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>';
        }
    });
  }]
})

【讨论】：

谢谢，阿曼。我最终将家设置为其他两个的兄弟，并让控制器根据解析的结果执行 $state.go。但是，我认为您的解决方案也可以正常工作，因此我接受它作为答案。

【解决方案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'
        });

【讨论】：

【解决方案3】：

我最终使 home 控制器成为 first 和 second 的兄弟，而不是父级，然后让 home 控制器根据解析结果执行 $state.go 到 first 或 second。

【讨论】：

【解决方案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);
        }]
      });

【讨论】：