用angularjs ui路由器将self部分替换为另一部分

我们需要使用绝对视图名称来精确地通知ui-router，将子模板放置在何处。 _（检查此
示例
）_在此处阅读更多信息：

• 视图名称-相对名称与绝对名称

引用：

// absolutely targets the unnamed view in root unnamed state.// <div ui-view/> within index.html"@" : { }

因此，根视图名称是空字符串，对于孩子来说，它可以表示为 “ @”

$stateProvider  .state('customers', {      url: "/customers",      templateUrl: "../views/customers.html",      controller: ['$scope', '$stateParams', '$state',        function($scope, $stateParams, $state) {      }]  })  .state('customers.create', {    url: "/create",    views: {      '@': {        templateUrl: "../views/customers.create.html"      }    }  })

在此查看更多信息

延伸。任何状态定义都是定义视图名称，该名称是其template / templateUrl /
templateProvider所属的。如果只有一个模板要注入父ui-view =“”（未命名），我们可以使用以下语法：

.state('customers', {      url: "/customers",     templateUrl: "tpl.customers.html",      controller: ....   })

等于以下语法：

.state('customers', {      url: "/customers",      views: {        // explicit information that we target unnamed view        '': {          templateUrl: "tpl.customers.html",          controller: ...         }      }  })

因此，如果我们确实必须

ui-view

<h4 data-ui-view="header"></h4><div data-ui-view=""></div>

我们可以这样定义状态：

$stateProvider  .state('customers', {      url: "/customers",      views: {        'header': {          template: '<div>customers</div>',          // controller...        },        '': {          templateUrl: "tpl.customers.html",          controller: ...        }      }  })  .state('customers.create', {    url: "/create",    views: {      'header@': {        template: "<div>create</div>",      },      '@': {        templateUrl: "tpl.customers.create.html",      }    }  })  ;

见扩展的例子plunker

延伸：对答案给予评论：

…我不知道为什么它现在在这里起作用…与之前将其放在我的代码中的效果一样：’@’：{templateUrl：“
tpl.customers.create.html”，}。

如此处所述：视图名称-相对名称与绝对名称：

在幕后，每个视图都被分配一个遵循方案的绝对名称

viewname@statename

，其中viewname是view指令中使用的名称，状态名称是该状态的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

那会发生什么呢？

1. 该

   ui-view=""

   摆在

   index.html

   越来越绝对名称“@”。确实由三部分组成 （而只有一个字符） 。定界符为

   @

   ，从其左边开始的字符代表viewName，右边的字符代表stateName

2. 处于状态

   'customers'

   的视图

   ui-view="header"

   的绝对名称为：

   "header@customers"

   。因此，任何子状态都可以使用自己的tamplate / tempalteUrl / templateProvider定位此视图

3. 具有

   'customers'

   未命名模板的状态，

   ui-view=""

   其缩写名称为

   "@customers"

   （@的左侧为未命名的空字符串）。如果子状态想

   'customers.create'

   针对此视图，

它可以使用以下之一：

views : {  "@customers" : {      template: ....   }}// ortemplate: ....

因为第二个仅使用隐式表示法，所以将以“” （无竞争名称） +“ @” （定界符） +“ customers” （父stateName） ==“
@ customers”结尾

4. 我们可以使用相同的符号作为根（index.html）的目标。

根名称为“”，而视图名称为“”，我们最终以命名

"" + "@" + "" == "@"

ui-view=""

"@"