Ui-router angolare per realizzare una vista condizionale

Question

Chiedo una domanda simile a questa domanda: Ui router condizionale Viste UI? , ma la mia situazione è un po 'più complessa e non riesco a sembrare la risposta fornita al lavoro.

Fondamentalmente, ho un URL che può essere reso due modi molto diversi, a seconda del tipo di entità che l'URL punta a.

Ecco cosa sto provando

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

.

Ho impostato una determinazione per recuperare l'entità effettiva da un servizio riposante. Ogni cosa sembra funzionare finché non arrivo effettivamente al transizione in base al tipo.

La transizione sembra funzionare, tranne la risoluzione di risoluzione e la garatinity fallisce perché l'ID è nullo.

Ho provato a inviare l'ID alle chiamate TransitionTo, ma quindi cerca ancora di eseguire una seconda risoluzione, il che significa che l'entità è recuperata dal servizio di riposo due volte.

Che cosa sembra accadere è che nel gestore Ontenter, lo stato non è ancora cambiato ancora, quindi quando accade la transizione, pensa che sia transizione a uno stato completamente nuovo piuttosto che a uno stato figlio. Questo è ulteriormente evidenziato perché quando rimuovo l'entità. Dal nome dello stato nel transizione, ritiene che lo stato attuale sia la radice, piuttosto che a casa. Questo mi impedisce anche di usare "vai" invece di transizione.

Qualche idea?

Answer 1

The Templateurl può essere una funzione pure in modo da controllare il tipo e restituisci un diversoVisualizza e definisci il controller nella vista anziché come parte della configurazione dello stato.Non è possibile iniettare i parametri a Templateurl in modo da poter utilizzare 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

Puoi anche fare quanto segue:

$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

Ho finito per rendere il controller domestico un fratello di primo e secondo, piuttosto che un genitore, e poi ha avuto il controller di casa fai uno stato $.go per prima o secondo a seconda dei risultati della risoluzione.

Answer 4

Utilizzare il codice verificato per la vista condizionale in interfaccia utente

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

.