angularjs - 关于使用 angular-ui-router 的嵌套命名视图的混淆

Question

使用angular-ui-router，一个用于angular 的外部路由插件找到here，我试图了解嵌套命名视图是如何工作的。我让最初的演示工作正常，但尝试进行一些修改，比如这样；

$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 文件内的named view。

错误

我收到的错误信息是这样的；

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

HTML

html 是这样的；

index.html

<div ui-view="viewA"></div>
<div ui-view="viewB"></div>

angular/partials/default.A.html

<h1>Default.A.HTML</h1>
<hr />
<a ui-sref="state1.list">Show List</a>
<div ui-view="viewAList"></div>

angular/partials/state1.list.html

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

angular/partials/default.B.html

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

Answer 1

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

命名你的状态（来自https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views）

没有两个州可以有相同的名称。使用点表示法时 如果没有明确提供，则推断父级，但这不是 更改州名。不使用点表示法时，父级必须是 明确提供，但您仍然不能命名任何两个状态 同样，例如你不能有两个不同的状态名为“编辑” 即使他们有不同的父母。