Question

我见过这样的few questions，如果我忽略了他们的重要细节，请原谅我。

当我加载http://localhost:8000/characters/#/mages/detail/3时，我会被重定向到我的'其他'网址：$urlRouterProvider.otherwise("/users");

但我的状态提供者（如果我已正确理解this）应加载正确的页面：

  $stateProvider
    .state('users', {
      url: "/users",
      templateUrl: DjangoProperties.STATIC_URL + "partials/users.html"
    })
    .state('users.list', {
      url: "/list",
      templateUrl: DjangoProperties.STATIC_URL +  "partials/users.list.html",
      controller: 'UserListCtrl'
    })
    .state('users.detail', {
      url: "/detail/{userID:int}",
      templateUrl: DjangoProperties.STATIC_URL +  "partials/users.detail.html",
      controller: 'UserDetailCtrl'
    })
    .state('mages', {
      url: "/mages",
      templateUrl: DjangoProperties.STATIC_URL + "partials/mages.html"
    })
    .state('mages.list', {
      url: "/list",
      templateUrl: DjangoProperties.STATIC_URL + "partials/mages.list.html",
      controller: 'MageCtrl'
    })
    .state('mages.detail', {
         url: "/detail/{mageID:int}",
         views:{
            "@mage.detail": {
                templateUrl: DjangoProperties.STATIC_URL +  "partials/mages.detail.html",
                controller: 'MageCtrl',
            },
            "characteristics@mage.detail": {
                templateUrl: DjangoProperties.STATIC_URL +  "common_partials/characteristics.html"
            }, 
            "attributes@mage.detail": {
                templateUrl: DjangoProperties.STATIC_URL +  "common_partials/attributes.html"
            }, 
            "skills@mage.detail": {
                templateUrl: DjangoProperties.STATIC_URL +  "common_partials/skills.html"
            }, 
            "spells@mage.detail": {
                templateUrl: DjangoProperties.STATIC_URL +  "partials/spells.html"
            }, 
        }
    });
  }]);

这是我的mages.html：

<h1>Mages</h1>
<hr/>
<a ui-sref="mages.list">Show List</a>
<div ui-view></div>

和我的mages.detail.html

<h4>{{mage.name}}</h4>
<div ui-view>
  <div ui-view="characteristics"></div>
  <div ui-view="attributes"></div>
  <div ui-view="skills"></div>
  <div ui-view="spells"></div>
</div>

这些都没有加载，只是默认的“列表”页面。

我觉得自己已经被我的观点名称搞糊涂了，但是我无法弄清楚该怎么做才能修复它们？

Answer 1

我尝试调整您的设置，并向您展示一种可能的方式。

a working plunker

所以，这些将是新状态 mages ：

.state('mages', {
  url: "/mages",
  templateUrl: DjangoProperties.STATIC_URL + "partials/mages.html"
})
.state('mages.list', {
  url: "/list",
  templateUrl: DjangoProperties.STATIC_URL + "partials/mages.list.html",
  controller: 'MageCtrl'
})

其中detail是列表的子项

.state('mages.list.detail', {
     url: "/detail/{mageID:int}",
     views:{
       /*
        "@mage.detail": {
            templateUrl: DjangoProperties.STATIC_URL +  "partials/mages.detail.html",
            controller: 'MageCtrl',
        },
        */
        "" : {
          templateUrl: "tpl.html",
        },
        "characteristics@mages.list": {
            //templateUrl: DjangoProperties.STATIC_URL +  "common_partials/characteristics.html"
            template: "common_partials/characteristics.html",
        }, 
        "attributes": {
            //templateUrl: DjangoProperties.STATIC_URL +  "common_partials/attributes.html"
            template: "common_partials/attributes.html"
        }, 
        "skills": {
            //templateUrl: DjangoProperties.STATIC_URL +  "common_partials/skills.html"
            template: "common_partials/skills.html"
        }, 
        "spells": {
            //templateUrl: DjangoProperties.STATIC_URL +  "partials/spells.html"
            template: "partials/spells.html"
        }, 
    }
});

这是两个基本的模板

mages.html（原样，没有变化）：

<h1>Mages</h1>
<hr/>
<a ui-sref="mages.list">Show List</a>
<div ui-view></div>

mages.list.html

<h3>The mages list</h3>
<h4>{{mage.name}}</h4>

<li><a href="#/mages/list/detail/1">mages/list/detail/1</a>
<li><a href="#/mages/list/detail/2">mages/list/detail/2</a>
<li><a href="#/mages/list/detail/3">mages/list/detail/3</a>
<li><a href="#/mages/list/detail/4">mages/list/detail/4</a>

<hr /> 

<div >
  <div ui-view=""></div>
  <div ui-view="characteristics"></div>
  <div ui-view="attributes"></div>
  <div ui-view="skills"></div>
  <div ui-view="spells"></div>
</div>

它现在包含指向详细信息的链接，还包含详细视图的锚点

Answer 2

another working plunker

如果我们想只有两个级别

mages
mages.list
mages.deatil

我们必须像这样调整状态def：

.state('mages', {
  url: "/mages",
  templateUrl: DjangoProperties.STATIC_URL + "partials/mages.html"
})
.state('mages.list', {
  url: "/list",
  templateUrl: DjangoProperties.STATIC_URL + "partials/mages.list.html",
  controller: 'MageCtrl'
})
.state('mages.detail', {
     url: "/detail/{mageID:int}",
     views:{

        "": {
            templateUrl: DjangoProperties.STATIC_URL +  "partials/mages.detail.html",
            controller: 'MageCtrl',
        },
        "state@mages.detail" : {
          templateUrl: "tpl.html",
        },
        "characteristics@mages.detail": {
            //templateUrl: DjangoProperties.STATIC_URL +  "common_partials/characteristics.html"
            template: "common_partials/characteristics.html",
        }, 
        "attributes@mages.detail": {
            //templateUrl: DjangoProperties.STATIC_URL +  "common_partials/attributes.html"
            template: "common_partials/attributes.html"
        }, 
        "skills@mages.detail": {
            //templateUrl: DjangoProperties.STATIC_URL +  "common_partials/skills.html"
            template: "common_partials/skills.html"
        }, 
        "spells@mages.detail": {
            //templateUrl: DjangoProperties.STATIC_URL +  "partials/spells.html"
            template: "partials/spells.html"
        }, 
    }
});

mages.list.html现在就像这样（没有儿童细节的地方）

<h3>The mages list</h3>
<h4>{{mage.name}}</h4>

<li><a href="#/mages/detail/1">mages/detail/1</a>
<li><a href="#/mages/detail/2">mages/detail/2</a>
<li><a href="#/mages/detail/3">mages/detail/3</a>
<li><a href="#/mages/detail/4">mages/detail/4</a>

mages.detail.html将是：

<div >

  <a ui-sref="mages.list">back to list</a>

  <div ui-view="state"></div>
  <div ui-view="characteristics"></div>
  <div ui-view="attributes"></div>
  <div ui-view="skills"></div>
  <div ui-view="spells"></div>
</div>

检查here

Answer 3

我想说明视图命名是如何工作的。 There is a working plunker

所以，让我们有index.html：

<H1><ui-view name="title" /></H1>

<ul>
  <li><a ui-sref="parent">parent</a>
  <li><a ui-sref="parent.child">parent.child</a>
</ul>

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

有一个未命名的视图，一个名为（标题）。我们有两个州。两者都将定位此'title'视图：

  .state('parent', {
      ...
      views : {
        ...
        "title" : {
          template : "parent is setting title inside of index.html"
        }
      }
  })
  .state('parent.child', { 
      ...
      views : {
        ...
        "title@" : {
          template : "CHILD is setting title inside of index.html"
        },
      }              
  })

我们可以看到，父母称视图为“标题”（相对名称）。原因是，index.html（ root 视图）是其父级。绝对名称也适用（实际上是在场景后面创建的）："title@"

另一方面，child必须使用绝对命名，因为它的目标是不属于父级的视图......它是祖父（root）。因此，视图名称为："title@"

现在，注入父的子模板是：

<div>

  <h4>Child</h4>

  <hr />

  View A:
  <div ui-view="viewA" ></div>
  View B:
  <div ui-view="viewB" ></div>

</div>

这意味着 child 状态定义现在将是：

 .state('parent.child', { 
      ...
      views : {
        "" : {
          templateUrl: 'tpl.child.html',
          controller: 'ChildCtrl',
        },            
        "viewA@parent.child" : {
          template : "<h5>child content of the view A</h5>"
        },
        "viewB@parent.child" : {
          template : "<h5>child content of the view B</h5>"
        }
        ... // title into the root
      }          
 })

首先，我们将 child 模板注入父级未命名视图"": {...

接下来，我们使用子完整状态名称 "viewB@parent.child" （存在于此子项内部） >

检查行动here

文档：

Multiple Named Views

...

在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，州名是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

当URL更改时，在Angular UI中，我的子模板未加载多个视图

3 个答案:

Multiple Named Views