Угловой маршрутизатор Ui с несколькими именованными представлениями и вложенными состояниями

Question

У меня вопрос о маршрутизаторе с угловым UI, когда я использую несколько именованных представлений во вложенных состояниях. В основном у меня есть абстрактное состояние с шаблоном, который указывает на два именованных представления. Эти два именованных представления определены как в суб-состояниях. Я хочу, чтобы URL-адрес был установлен в/test.

При переходе к любому из под-состояний, я вижу только представление, соответствующее первому под-состоянию. Почему это? Я действительно надеюсь, что кто-то может уточнить понятие для меня, так что я могу узнать

JSFiddle здесь: https://jsfiddle.net/adeopura/e2c5n14o/16/

angular.module('myApp', ['ui.state']) 
.config(['$stateProvider', '$routeProvider', 
function ($stateProvider, $routeProvider) { 
    $stateProvider 
     .state('test', { 
      abstract: true, 
      url: '/test', 
      views: { 
       'main': { 
        template: '<h1>Hello!!!</h1>' + 
           '<div ui-view="view1"></div>' + 
           '<div ui-view="view2"></div>' 
       } 
      } 
     }) 
     .state('test.subs1', { 
      url: '', 
      views: { 
       'view1': { 
        template: "Im 1View1" 
       }, 
       'view2': { 
        template: "Im 1View2" 
       } 
      } 
     }) 
     .state('test.subs2', { 
      url: '', 
      views: { 
       'view1': { 
        template: "Im 2View1" 
       }, 
       'view2': { 
        template: "Im 2View2" 
       } 
      } 
     }); 
}]) 
.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) { 
    $rootScope.$state = $state; 
    $rootScope.$stateParams = $stateParams; 
    $state.transitionTo('test.subs1');//I see the data corresponding to the test.subs1 
    // Assume here that there are lots of different state transitions in between unrelated to the test1 state 
    $state.transitionTo('test.subs2');//I still see the data corresponding to the test.subs1, why is that? 

}]); 

Answer 1

Один из моих коллег объяснил, что происходит в этом случае. Объяснил, как показано ниже:

1. state.transitionTo ('test.subs2') заставляет приложение перейти в состояние 'test.subs2'
2. После того, как в состоянии 'test.subs2', то URL будет изменен/test
3. Это приводит к тому, что Угловой UI-маршрутизатор запускает изменение в соответствующее состояние.
4. Соответствующее состояния является первым один, который соответствует URL/тест, который бы состояние «test.subs1»

Надеется, что это помогает кому-то

Answer 2

Это на самом деле порядок, с помощью которого вы определили их. Поменяйте порядок так, чтобы вы определили test.sub2 перед test.sub1, и вы увидите, что он запустит @ test.sub2.

Answer 3

Я думаю, это потому, что у вас нет URL-адреса, назначенного для любого из под-состояний. Я бы попробовал дать им свои собственные URL-адреса и посмотреть, сможете ли вы тогда ссылаться на состояния таким образом.