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"];
            }
         }
      }
   });

我的想法是将列表内容设置为嵌套在named view文件中的default.A.html。

错误

我收到的错误信息是这个;

  

错误：无法从状态'default'

解析'state1.list'

HTML

html看起来像这样;

的index.html

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

角/分音/ default.A.html

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

角/分音/ state1.list.html

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

角/分音/ default.B.html

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

Answer 1

问题是当你提供state1.list时，＆＃39; state1＆＃39;州被认为是“州名”的父母。州。但是你没有一个名为“state1＆＃39;”的州。一旦您将其更改为＆＃39; default.list＆＃39;，推断的父级就是默认＆＃39;，这是有效的，因为您确实有默认的＆＃39;州。如果您创建了一个名为＆＃39; state1＆＃39;然后另一个名为＆＃39; state1.list＆＃39;然后那也行。

  

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

     

没有两个州可以拥有相同的名称。使用点符号时   如果未明确提供，则推断父项，但这并不是   改变州名。不使用点表示法时，父必须是   明确提供，但你仍然无法命名任何两个州   同样，例如，你不能有两个不同的状态名为＆＃34;编辑＆＃34;   即使他们有不同的父母。