Angularjs 角度Ui路由器，嵌套命名视图-我做错了什么？

我正在尝试使用ui路由器使用嵌套命名视图实现一个非常简单的示例，但我无法让它工作。如果有人能看看这个JSFIDLE——告诉我我做错了什么，我将不胜感激

其基本思想是： -My index.html只有一个ui视图 -插入的模板具有两个命名的ui视图 -我正在尝试设置配置以使用模板填充这两个ui视图，但无法使其正常工作

这是小提琴的核心（模板中的尖括号替换为[]）：

我已经调整了好几个小时了（尝试绝对名称等），我快要发疯了。根据文档（至少对我来说）它看起来不错，但是没有任何简单的例子，我肯定遗漏了一些明显的东西

更新 通过从测试状态中删除url并将url:“”添加到test.subs状态，它可以正常工作。但将任何url添加到测试状态会导致它再次失败。在我的真实场景中，这些状态都不是根状态，父状态中根本没有url会导致工作不正常。就好像那个状态没有被激活一样。根据文档，在子文件中包含url:“”应该会导致它与其父状态一起被激活，但实际情况并非如此

更新-解决方案

---

对于任何想要查看它的人-

在“测试”状态中添加“abstract:true”。如果随后转换到test.subs，您将看到子视图。

上述代码中有两个问题：

正如kju建议的那样，abstract:true，

抽象状态永远不会被直接激活，但可以提供 将继承的属性添加到其公共子状态

在

test.sub

状态中添加

url:“

”

使用空url意味着当 它的父url被导航到

不要手动转换到“测试”

见下面的代码：

angular.module('myApp', ['ui.state'])
.config(['$stateProvider', '$routeProvider',  
    function ($stateProvider, $routeProvider) {
        $stateProvider
            .state('test', {
                abstract: true,
                url: '',
                views: {
                    'main': {
                         template:  '<h1>Hello!!!</h1>' +
                                    '<div ui-view="view1"></div>' +
                                    '<div ui-view="view2"></div>'
                    }
                }
            })
            .state('test.subs', {
                url: '',
                views: {
                    'view1': {
                        template: "Im View1"
                    },
                    'view2': {
                        template: "Im View2"
                    }
                }
            });
    }])
    .run(['$rootScope', '$state', '$stateParams', function ($rootScope,   $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
//        $state.transitionTo('test');
    }]);

angular.module（'myApp'，['ui.state']））
.config（['$stateProvider'，'$routeProvider'，
函数（$stateProvider，$routeProvider）{
$stateProvider
.状态（“测试”{
摘要：没错，
url:“”，
观点：{
“主要”：{
模板：“你好！！！”+
'' +
''
}
}
})
.state（'test.subs'{
url:“”，
观点：{
“视图1”：{
模板：“Im视图1”
},
“视图2”：{
模板：“Im视图2”
}
}
});
}])
.run（['$rootScope'，'$state'，'$stateparms'，函数（$rootScope，$state，$stateparms）{
$rootScope.$state=$state；
$rootScope.$stateParams=$stateParams；
//$state.transitiono（'test'）；
}]);

这不起作用。这使得“你好！！！”也消失了。您可以在jsFiddle中尝试它。在我的例子中，测试状态应该并且需要被激活。而且，也许我不清楚。没有“转换到子视图”。我希望SUB在初始页面加载时显示。也许这就是我的问题所在。当用户转到“/”站点的根目录时，所有内容都应该是可见的——“Hello！！！”，以及“Im View1”和“Im View2”。无论有无摘要：true，这都不起作用。这是我之前尝试过的众多调整之一。玩JSFIDLE。衷心的祝贺等待着任何能让它工作的人：）好的，所以如果我根本不添加摘要，从测试状态中删除url并将其添加到test.subs状态，它“工作”。一切都显示出来了，但我觉得还是有问题。在我的真实代码中，曾经在该控制器中工作的代码不再工作（我调用端点，但什么也没发生）。我需要的是两个状态都处于活动状态，或者以某种方式将它们组合成一个状态。查看这一点的一种简单方法是将测试状态设置为除“url:”，子状态设置为“url:”。它再次完全停止工作（子视图不显示）。@TimHardy查看我的更新代码。如果需要激活这两种状态，则需要

转换到（'test.subs'）

或转到

test.subs

的url，就是这样！非常感谢你。它是基状态上的“abstract:true”与具有url:“”的子状态的组合。基本状态现在可以有任何url。查看我的小提琴以了解最终结果-@TimHardy你的小提琴解决了我的问题。。。我被难住了一段时间。你应该在问题的更新中发布你的工作提琴。

angular.module('myApp', ['ui.state'])
.config(['$stateProvider', '$routeProvider',  
    function ($stateProvider, $routeProvider) {
        $stateProvider
            .state('test', {
                abstract: true,
                url: '',
                views: {
                    'main': {
                         template:  '<h1>Hello!!!</h1>' +
                                    '<div ui-view="view1"></div>' +
                                    '<div ui-view="view2"></div>'
                    }
                }
            })
            .state('test.subs', {
                url: '',
                views: {
                    'view1': {
                        template: "Im View1"
                    },
                    'view2': {
                        template: "Im View2"
                    }
                }
            });
    }])
    .run(['$rootScope', '$state', '$stateParams', function ($rootScope,   $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
//        $state.transitionTo('test');
    }]);