Enrutador de ui angular para lograr una vista condicional

Question

Estoy haciendo una pregunta similar a esta pregunta: UI Router Condiced Ui Views? , Pero mi situación es un poco más compleja y parece que no puedo obtener la respuesta proporcionada para trabajar.

Básicamente, tengo una URL que se puede representar de dos maneras muy diferentes, dependiendo del tipo de entidad que señala la URL.

aquí es lo que estoy intentando actualmente

    $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'
        });

Establecí una determinación de buscar la entidad real de un servicio reparador. Todo parece estar trabajando hasta que en realidad llegue a la transición en función del tipo.

La transición parece funcionar, excepto que la resolución se vuelve a fuego y la obtención de la entrada falla porque la identificación es nula.

He intentado enviar la identificación a la transición de las llamadas, pero luego aún intenta hacer una segunda resolución, lo que significa que la entidad se recupera del servicio de descanso dos veces.

Lo que parece estar sucediendo es que en el manejador de Onenter, el estado no ha cambiado aún, por lo que cuando ocurre la transición, cree que es la transición a un estado completamente nuevo en lugar de a un estado infantil. Esto se evidencia aún más porque cuando quito la entidad. Desde el nombre del estado en la transición, cree que el estado actual es root, en lugar de en casa. Esto también me impide usar 'IR' en lugar de transición.

¿Alguna idea?

Answer 1

The Templateurl puede ser una función también para verificar el tipo y devolver un diferenteVea y defina el controlador en la vista en lugar de como parte de la configuración del estado.No puede inyectar parámetros para templateURL para que tenga que usar 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

También puede hacer lo siguiente:

$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

Terminé haciendo que el controlador de viviendas sea un hermano de primer y segundo, en lugar de un padre, y luego hizo que el controlador del hogar hiciera un $ State.go a primera o segundo dependiendo de los resultados de la resolución.

Answer 4

Uso Código verificado para la vista condicional en 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);
        }]
      });