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

Question

在客户视图中，我有一个创建客户按钮，该按钮应该加载的位置的customers.create.html局部视图customers.html。

如何将当前视图"customers.html"替换为另一个视图"customers.create.html"？

customer.html

<div>
    <button ng-click="create()" class="btn btn-default" ui-sref="customers.create">Create</button>
</div>
<div style="height:500px;" ng-grid="myOptions"></div>

app.js

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

在单击创建按钮的那一刻，路由更改为/ customers / create，但html视图却没有变化，只是保持不变。

我不能将“ <div ui-view></div>创建”按钮放在下面，因为这样客户数据网格和创建按钮仍然可见。

也许我不应该使用分层的customer.create视图？

Answer 1

我们需要使用绝对视图名称来精确地通知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: ....
   }
}
// or
template: ....

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

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

根名称为“”，而视图名称为“”，我们最终以命名"" + "@" + "" == "@"。这就是为什么这个神奇的设置可以完成将我们的视图 ui- view="" 通过以下方式放入根index.html的原因 "@"