角UI路由器来完成有条件的看法 [英] 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.

基本上，我有可以呈现非常不同的方式，这取决于实体类型的URL指向。

Basically, I have a url that can be rendered to 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'
        });

我成立了一个决心从RESTful服务获取实际的实体。
每一件事情似乎是工作，直到我将根据该类型实际上得到的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.

过渡似乎工作，但决心再火灾和由于id是空的getEntity失败。

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状态名称，它相信当前的状态是根，而不是家庭。这也prevents我使用'走'，而不是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>';
        }
    });
  }]
})

这篇关于角UI路由器来完成有条件的看法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！