自替换部分与其他部分与ang​​ularjs UI路由器 [英] Replace self partial with another partial with angularjs ui router

问题描述

在客户视图我有一个客户创造按钮，这应该会载入 customers.create.html 局部图，其中 customers.html客户定位。

In the customers view I have a create customer button which should load a customers.create.html partial view where the customers.html is positioned.

如何能在当前视图customers.html客户按另一种看法取代customers.create.html？

How can the current view "customers.html" be replaced by another view "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"
                })

目前，当创建按钮被点击的路由变化的时刻/客户/创建而不是HTML视图，它只是保持不变。

At the moment when the create button is clicked the route changes to /customers/create but not the html view it just stays the same.

我不能把＆LT;格UI的视图＆gt;＆LT; / DIV＆GT; 下的创建按钮，因为那时顾客DataGrid和建立按钮仍然可见

I can not put the <div ui-view></div> under the create button because then the customers datagrid and the create button would still be visible.

也许我不应该用分层customers.create看法？

Maybe I should not use a hierarchical customers.create view ?

推荐答案

我们需要用绝对的视图名，为precisely告知用户界面的路由器，在哪里（重新）放置子模板。的（检查这个例如）的在这里阅读更多：

We need to use absolute view name, to precisely inform ui-router, where to (re-)place the child template. (check this example) Read more here:

• View名称 - 相对与绝对名称

• View Names - Relative vs. Absolute Names

引用

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

所以，根视图名称为空字符串，这对于一个孩子可以重新psented为$ P $ '@'

$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

扩展。任何国家确定指标，被定义视图名称，其中它的模板/ templateUrl / templateProvider属于。如果只有一个模板被注入到母公司UI视图=（未命名），我们可以使用下面的语法：

Extend. Any state defintion, is defining the view name, where its template/templateUrl/templateProvider belongs to. If there is only one template to be injected into parent ui-view="" (unnamed) we can use this syntax:

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

这等于语法如下：

which is equal to this syntax:

.state('customers', {
      url: "/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>

我们可以这样定义状态：

we can define states like this:

$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

扩展：给的答案评论：

...我不知道为什么现在的工作在这里...没有像以前我只是把这个在我的code相同的：'@'：{templateUrl：tpl.customers.create.html ，} ..

... I have no idea why it works now here...did the same as before I just put this in my code: '@': { templateUrl: "tpl.customers.create.html", }..

这里提到：<一href=\"https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names\">View名称 - 相对与绝对名称：

在幕后，每一个观点被分配遵循的方案绝对名称 视图名@ Statename的 ，其中视图名是所使用的名称view指令和国家名称是国家的绝对名称，例如： contact.item。您也可以选择在绝对语法来写你的视图名称。

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

那么会发生什么？

1. 的用户界面视图=放在 index.html的是获得绝对的名字 @。其中不包括三个部分的（而只有一个字符）的。分隔符为 @ 的字符留下从中再present的的viewName的字符在右侧再present的Statename的

1. The ui-view="" placed in index.html is getting the absolute name "@". Which does consist of three parts (while only one char). The delimiter is @, the chars left from it represent the viewName, the chars on a right side represent the stateName

拥有的状态'客户'视图，用用户界面视图=头其绝对名称将是： 首部@客户 。因此，任何一个孩子的状态可以针对这种观点有其自身的tamplate / tempalteUrl / templateProvider

Having in a state 'customers' a view, with ui-view="header" its absolute name would be: "header@customers". So any child state can target this view with its own tamplate/tempalteUrl/templateProvider

有一个状态'客户'未命名模板用户界面视图=其aboslute名将 @客户 （左侧从@未命名空字符串）。如果孩子喜欢的状态的 'customers.create 想针对这种观点，

Having a state 'customers' with unnamed template ui-view="" its aboslute name would be "@customers" (left side from @ is unnamed empty string). If child state like 'customers.create' would like to target this view,

它可以使用其中的一个：

it can use one of these :

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

由于第二只使用隐式的符号，这将结束在的（无VIE名）的+@的（分隔符）的+客户的（父Statename的）的==@customers

because the second just uses implicit notation, which will end up in "" (no vie name) + "@" (delimiter) + "customers" (parent stateName) == "@customers"

4。我们可以针对使用相同的符号根（的index.html）。

4. we can target the root (index.html) using the same notation.

根名称是和而视图名称为我们在结束了，+@+==@。这就是为什么这片神奇的设置做工作，以我们的观点放到根 用户界面视图= index.html的通过的 @

The root name is "" and while the view Name is "" we end up in "" + "@" + "" == "@". And that's why this magical setting does the job to place our view into root ui-view="" index.html via "@"

这篇关于自替换部分与其他部分与ang​​ularjs UI路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！