Angular ui-router для выполнения условного просмотра

Я задаю аналогичный вопрос на этот вопрос: условный ui-интерфейс UI-маршрутизатора?, но моя ситуация немного сложнее, и я не могу получить предоставленную ответ на работу.

В принципе, у меня есть 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 для извлечения фактического объекта из резервной службы. Кажется, что все работает, пока я не перейду на переход на основе этого типа.

Кажется, что переход работает, за исключением того, что происходит повторный вызов разрешения, и getEntity терпит неудачу, потому что идентификатор является нулевым.

Я попытался отправить идентификатор на вызовы перехода, но затем он все еще пытается выполнить второе решение, то есть объект дважды извлекается из службы останова.

Похоже, что в обработчике onEnter состояние еще не изменилось, поэтому, когда переход происходит, он думает, что он переходит в совершенно новое состояние, а не в дочернее. Это еще раз подтверждается, потому что когда я удаляю объект. от имени состояния в transitionTo, он считает, что текущее состояние является корневым, а не домашним. Это также мешает мне использовать "go" вместо перехода.

Любые идеи?

Ответы

Ответ 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>';
        }
    });
  }]
})

Ответ 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

Я закончил тем, что стал домашним контролером братьев первого и второго, а не родителя, а затем контроллер дома сделал $state.go на первый или второй в зависимости от результатов решения.

Ответ 4

Использовать проверенный код для условного просмотра в u-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);
        }]
      });