javascript - 有多个 View ，URL更改时，我的子模板未在Angular UI中加载

我已经看到过这样的few questions，所以如果我忽略了其中的关键细节，请原谅我。

加载http://localhost:8000/characters/#/mages/detail/3时，我将重定向到我的“其他” URL：$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',
            },
            "[email protected]": {
                templateUrl: DjangoProperties.STATIC_URL +  "common_partials/characteristics.html"
            },
            "[email protected]": {
                templateUrl: DjangoProperties.STATIC_URL +  "common_partials/attributes.html"
            },
            "[email protected]": {
                templateUrl: DjangoProperties.STATIC_URL +  "common_partials/skills.html"
            },
            "[email protected]": {
                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>

这些均未加载，仅默认的“列表”页面已加载。

我觉得自己对视图名称已经一头雾水，但是我不知道该如何解决？

最佳答案

有another working plunker

如果我们只想有两个级别


法师
法师列表
法师


我们必须像这样调整状态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',
        },
        "[email protected]" : {
          templateUrl: "tpl.html",
        },
        "[email protected]": {
            //templateUrl: DjangoProperties.STATIC_URL +  "common_partials/characteristics.html"
            template: "common_partials/characteristics.html",
        },
        "[email protected]": {
            //templateUrl: DjangoProperties.STATIC_URL +  "common_partials/attributes.html"
            template: "common_partials/attributes.html"
        },
        "[email protected]": {
            //templateUrl: DjangoProperties.STATIC_URL +  "common_partials/skills.html"
            template: "common_partials/skills.html"
        },
        "[email protected]": {
            //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