Question

当我在嵌套状态下使用多个命名视图时，我对Angular 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

它实际上是您定义它们的顺序。交换订单，以便在test.sub1之前定义test.sub2，然后您将看到它＆＃39; ll start @ test.sub2。

Answer 2

我认为这是因为你没有为任何一个子状态分配网址。我会尝试给他们自己的url路径，然后看看你是否可以这样引用状态。

Answer 3

我的一位同事解释了此案件的情况。解释如下：

state.transitionTo（'test.subs2'）导致应用程序进入状态'test.subs2'
进入状态'test.subs2'后，URL将更改为/ test
这会导致Angular UI路由器触发对适当状态的更改。
适当的状态是第一个匹配URL / test的状态，即状态'test.subs1'

希望这有助于某人

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

3 个答案: