用angularjs ui路由器替换另一部分自我部分

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

$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"
                })

我们需要使用绝对视图名称,以准确地通知ui-router,在哪里(重新)放置子模板. (查看这个 example)在这里阅读更多：

> View Names – Relative vs. Absolute Names

引用：

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

因此,根视图名称是空字符串,对于子项,可以表示为“@”

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

请参阅本plunker中的更多内容

延伸.任何状态定义都是定义视图名称,其template / templateUrl / templateProvider属于该名称.如果只有@L_674_1@模板要注入父ui-view =“”(未命名),我们可以使用以下语法：

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

这等于这个语法：

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

所以,如果我们必须在根级别上查看目标

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

我们可以定义这样的状态：

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

参见扩展示例plunker

EXTEND：给出评论的答案：

如上所述：View Names – Relative vs. Absolute Names：

那会发生什么？

>放在index.html中的ui-view =“”获得绝对名称“@”.它由三部分组成(只有@L_674_1@字符).分隔符是@,它左边的字符代表viewName,右边的字符代表statename
>在“客户”状态下,使用ui-view =“header”,其绝对名称为：“header @ customers”.因此,任何子状态都可以使用自己的tamplate / tempalteUrl / templateProvider来定位此视图
>拥有@L_674_1@未命名模板的州’客户’ui-view =“”它的aboslute名称将是“@customers”(@的左侧是未命名的空字符串).如果像’customers.create’这样的子状态想要定位此视图,

它可以使用以下其中一种：

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

因为第二个只使用隐式表示法,最终会以“”(无名字)“@”(分隔符)“customers”(parent stateName)==“@customers”结尾

4.我们可以使用相同的表示法来定位根(index.html).

根名称是“”,而视图名称是“”,我们最终在“”“@”“”==“@”.这就是为什么这个神奇的环境能够将我们的视图放到root ui-view =“”index.html来自“@”