angularjs-关于使用AngularUI路由器的嵌套命名视图的混淆

使用

angular ui router

，找到了一个用于

angular

的外部路由插件，我试图了解嵌套命名视图是如何工作的。我让最初的演示很好地工作，但试图做一些修改，像这样

$stateProvider
   .state('default', {
      url: "/default",
      views: {
         "viewA" : { templateUrl: "angular/partials/default.A.html" },
         "viewB" : { templateUrl: "angular/partials/default.B.html" }
      }
   })
   .state('state1.list', {
      url: "/state1list",
      views: {
         "viewAList" : { 
            templateUrl: "angular/partials/state1.list.html",
            controller: function($scope) {
               $scope.items = ["A", "List", "Of", "Items"];
            }
         }
      }
   });

我的想法是将列表内容设置为嵌套在

default.a.html

文件中的

命名视图

错误
我收到的错误消息是：

错误：无法从“默认”状态解析“state1.list”

HTML
html如下所示

$stateProvider
   .state('default', {
      url: "/default",
      views: {
         "viewA" : { templateUrl: "angular/partials/default.A.html" },
         "viewB" : { templateUrl: "angular/partials/default.B.html" }
      }
   })
   .state('state1.list', {
      url: "/state1list",
      views: {
         "viewAList" : { 
            templateUrl: "angular/partials/state1.list.html",
            controller: function($scope) {
               $scope.items = ["A", "List", "Of", "Items"];
            }
         }
      }
   });

index.html


角度/部分/default.A.html
Default.A.HTML

显示列表

angular/partials/state1.list.html
状态1项目列表

{{item}


角度/部分/default.B.html
Default.B.HTML

问题在于，当您提供state1.list时，“state1”状态被认为是“state1.list”状态的父级。但是您没有一个名为“state1”的状态。将其更改为“default.list”后，推断出的父项为“default”，因为您确实有一个“default”状态。如果您创建了一个名为“state1”的新状态，然后又创建了一个名为“state1.list”的新状态，那么这也会起作用

命名您的州（从）

没有两个州可以有相同的名称。使用点表示法时
如果未显式提供父级，则会推断父级，但不提供父级
更改州名称。不使用点表示法时，父项必须为
显式提供，但仍然无法命名该
相同，例如，不能有两个名为“编辑”的不同状态
即使他们有不同的父母

经过进一步测试，似乎路由名称可能是问题所在。当我将路由更改为
default.list
时，它成功了。有人能证实/详细说明一下吗？这是一个重要的细节，我希望我能在文件上找到。非常感谢您的澄清。没问题-很高兴它有帮助。
<h1>Default.A.HTML</h1>
<hr />
<a ui-sref="state1.list">Show List</a>
<div ui-view="viewAList"></div>

<h3>List of State 1 Items</h3>
<ul>
    <li ng-repeat="item in items">{{ item }}</li>
</ul>

<h1>Default.B.HTML</h1>
<hr />