Javascript 对于多视图，当URL更改时，我的子模板不会在角度UI中加载

我看过这样的电影，所以如果我忽略了他们的一个重要细节，请原谅我

当我加载

http://localhost:8000/characters/#/mages/detail/3

我被重定向到我的'otherwise'url:

$urlRouterProvider.otherwise（“/users”）

但是我的状态提供程序（如果我理解正确）应该加载正确的页面：

  $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>

<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>

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

我觉得我的视图名称弄糊涂了，但我不知道如何修复它们？
我试图调整您的设置，并向您展示一种可能的方法

有

因此，这些将是新的状态法师：

其中详细信息是列表的子项

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

这是两个基本的TMP板

mages.html（原样，没有更改）：

Mages






它现在包含到详细信息的链接，还包含详细信息视图的锚定

如果我们只想有两个级别


法师
法师名单
魔法师

我们必须按如下方式调整状态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现在将是这样（没有放置子细节的位置）

法师列表
{{mage.name}





而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>


我想展示一下视图命名是如何工作的

那么，让我们来看看这个
index.html
：

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

<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”（相对名称）。原因是，
index.html
（根视图）是它的父视图。绝对名称也可以（事实上是在幕后创建的）：
“title@

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

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


小孩

视图A：
视图B：

这意味着现在儿童国家的定义将是：

 .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
      }          
 })

.state（'parent.child'，{
...
观点：{
"" : {
templateUrl:'tpl.child.html'，
控制器：“ChildCtrl”，
},            
"viewA@parent.child" : {
模板：“视图A的子内容”
},
"viewB@parent.child" : {
模板：“视图B的子内容”
}
…//将标题插入根目录
}          
})

所以首先我们将子模板注入父未命名视图
“”：{…

接下来，我们使用子完整状态名
注入一些绝对命名===的视图（存在于该子视图内部）viewB@parent.child“

检查它的运行情况

文件：


在幕后，每个视图都会被分配一个绝对名称，该名称遵循
viewname@statename，其中viewname是view指令中使用的名称，state name是州的绝对名称，例如contact.item。您也可以选择以绝对语法编写视图名称

这太棒了，而且比我的尝试效果要好得多！我唯一的困惑是，您将
templateUrl
替换为
template
…这只是为了向我们展示出现的内容，而不必填充这些文件吗？所以唯一真正的变化是，我的主状态名称是
“@mage.detail”
当它应该是
“
时。为什么？很抱歉混淆了！；）我只是懒惰……；）；）所以我没有创建
“fileInsideOfTemplateUrl”
而是将它改成
templateUrl
int
template
-所以内容（模板名称）成为模板itslef；）抱歉。这是我的小欺骗。是的…@mages.detail是必需的，但请检查我的名字“mages.detail”不是“mage.detail”它必须与州名（结尾的S）相同。那没关系。第二部分呢？我本以为
“@mage.detail”
会起作用的……我会这样解释。1）如果我们处于子状态，并且我们希望以父视图为目标，那么：我们只能使用
“viewName”
。
“viewName@parent“
也可以，但这是多余的。2）如果我们需要将视图置于非父状态，则必须提供完整的绝对名称。例如，
"viewName@child“
如果我们将视图定位于child本身，这是必须的。希望它能帮助…我不确定我是否在跟踪？
<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>

<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>

  .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"
        },
      }              
  })

<div>

  <h4>Child</h4>

  <hr />

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

</div>

 .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
      }          
 })