Angular ui-router 完成条件视图 [英] Angular ui-router to accomplish a conditional view

问题描述

我在问一个与此问题类似的问题:UI 路由器条件 ui 视图?，但我的情况有点复杂，我似乎无法得到提供的答案.

I am asking a similar question to this question: UI Router conditional ui views?, but my situation is a little more complex and I cannot seem to get the provided answer to work.

基本上，我有一个可以以两种截然不同的方式呈现的网址，具体取决于网址指向的实体类型.

Basically, I have a url that can be rendered two very different ways, depending on the type of entity that the url points to.

这是我目前正在尝试的

    $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.

I set up a Resolve to fetch the actual entity from a restful service. Every thing seems to be working until I actually get to the transitionTo based on the type.

转换似乎有效，除了解析重新触发并且 getEntity 由于 id 为空而失败.

The transition seems to work, except the resolve re-fires and the getEntity fails because the id is null.

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

I've tried to send the id to the transitionTo calls, but then it still tries to do a second resolve, meaning the entity is fetched from the rest service twice.

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

What seems to be happening is that in the onEnter handler, the state hasn't actually changed yet, so when the transition happens, it thinks it is transitioning to a whole new state rather than to a child state. This is further evidenced because when I remove the entity. from the state name in the transitionTo, it believes the current state is root, rather than home. This also prevents me from using 'go' instead of transitionTo.

有什么想法吗?

推荐答案

templateUrl 可以也是一个函数，因此您可以检查类型并返回不同的视图并在视图中定义控制器，而不是作为状态配置的一部分.您无法向 templateUrl 注入参数，因此您可能必须使用 templateProvider.

The templateUrl can be a function as well so you check the type and return a different view and define the controller in the view rather than as part of the state configuration. You cannot inject parameters to templateUrl so you might have to use 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>';
        }
    });
  }]
})

这篇关于Angular ui-router 完成条件视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！