Question

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

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

customers.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>置于创建按钮下，因为客户数据网格和创建按钮仍然可见。

也许我不应该使用分层客户。创建视图？

Answer 1

我们需要使用绝对视图名称，以准确地通知ui-router，在哪里（重新）放置子模板。 （查看此example）在此处阅读更多内容：

View Names - Relative vs. Absolute Names

举：

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

因此，根视图名称为空字符串，对于子项，可以将其表示为＆＃39; @＆＃39;

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

在此plunker

中查看详情

扩展。任何状态定义都是定义视图名称，其template / templateUrl / templateProvider属于该名称。如果只有一个模板要注入父ui-view =＆＃34;＆＃34; （未命名）我们可以使用这种语法：

.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

EXTEND：给出评论的答案：

......我不知道为什么它现在在这里工作......和我之前的代码一样：＆＃39; @＆＃39;：{templateUrl：＆＃34; tpl。 customers.create.html＆＃34;，} ..

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

在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，状态名称是状态＆＃39 ; s绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

那会发生什么？

放置在ui-view=""中的index.html获得绝对名称＆＃34; @＆＃34;。其中包含三个部分（只有一个字符）。分隔符是 @ ，其左边的字符代表viewName，右边的字符代表stateName
状态为'customers'的状态ui-view="header"的绝对名称为： "header@customers" 。因此，任何子状态都可以使用自己的tamplate / tempalteUrl / templateProvider
状态'customers'包含未命名的模板ui-view=""，其aboslute名称将为 "@customers" （@的左侧是未命名的空字符串）。如果 'customers.create' 等子状态想要定位此视图，

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

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

因为第二个只是使用隐式表示法，最终会出现在＆＃34;＆＃34; （没有姓名） +＆＃34; @＆＃34; （分隔符） +＆＃34;客户＆＃34; （parent stateName） ==＆＃34; @ customers＆＃34;

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

根名称为＆＃34;＆＃34;虽然名称是＆＃34;＆＃34;我们最终进入"" + "@" + "" == "@"。这就是为什么这个神奇的设置可以通过 ui-view="" "@" index.html的工作>

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

1 个答案: