Angular Ui路由器多个命名视图和嵌套状态

我有一个关于Angular UI路由器的问题，当我在嵌套状态中使用多个命名视图。基本上我有一个抽象的状态与模板，指向两个命名的意见。这两个命名的视图在两个子状态中定义。我想保持URL固定到/测试。Angular Ui路由器多个命名视图和嵌套状态

当转换到任何一个子状态时，我只能看到对应于第一个子状态的视图。这是为什么？我真的希望有人能澄清这一概念对我来说，我可以学习

的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? 

}]);

来源

2016-03-29 AshD

你的“新”拨弄它缺少的外部引用 – beauXjames

更新了小提琴以供参考。 – AshD

我的一位同事解释了在这种情况下发生了什么。解释如下：

state.transitionTo（ 'test.subs2'）会导致应用程序进入状态 'test.subs2'
一旦进入状态 'test.subs2'，该URL被改变/测试
这会导致Angular UI路由器将更改激发到适当的状态。
适当的状态是，URL /测试，这将是该州test.subs1“

希望这可以帮助别人相匹配的第一个

来源

2016-03-30 21:17:27 AshD

它实际上是由你定义的顺序。交换顺序，以便在test.sub1之前定义test.sub2，您将看到它将开始@ test.sub2。

来源

2016-03-29 19:51:35 beauXjames

这是麻烦，对。为什么要去test.sub1？当我尝试转换到test.sub2时，我总是以状态1结束，或者看起来如此。稍微更新代码以清楚地表明问题。 – AshD

我认为这是因为你没有分配给任何一个子状态的url。我会尝试给他们自己的url路径，看看你是否可以通过这种方式引用状态。

来源

2016-03-29 20:39:17 Gary

我不想更改网址。面向更多用户的URL意味着更多的错误消息，我需要考虑。 – AshD

Angular Ui路由器多个命名视图和嵌套状态

回答

相关问题