大佬教程收集整理的这篇文章主要介绍了2、Angular-Ui Router 嵌套状态和嵌套视图,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
States can be nested within each other. There are several ways of nesTing states:
状态可以相互嵌套,嵌套状态有几种方法:
.state('contacts.list',{})
.parent
property with the parent name asString. For example:parent: 'contacts'
parent
property with the parentobject. For exampleparent: contacts
(where 'contacts' is a stateObject)You can use dot Syntax to infer your hierarchy to the $stateProvider. Below,contacts.list
becomes a child ofcontacts
.
您可以使用点语法来推断您的$stateProvider层次结构。下面的contacts.list变成了contacts的子状态。
This is a 3rd party module created by @marklagendijk. So you have to include it inadditionto ui-router.Visit the stateHelper repo to learn more
这是由@marklagendijk创建的第三方模块。所以你必须在ui-router之外加上它。访问stateHelper了解更多信息
Alternately,you can specify the parent of a state via theparent
property.
您可以通过父属性指定状态的父状态。
If you aren't fond of using String-based states,you can also use object-based states. Thename
property goesinthe object and theparent
property@H_324_23@mustbe set on all child states,like this:
如果您不喜欢使用基于字符串的状态,那么也可以使用基于对象的状态。name属性在对象中,父属性必须在所有子节点上设置,如下:
You can usually reference the object directly when using other methods and property comparisons:
在使用其他方法或属性比较时,通常可以直接引用该对象:
You can register states in any order and across modules. You can register children before the parent state exists. It will queue them up and once the parent state is registered then the child will be registered.
您可以按任意顺序和跨模块注册状态。您可以在父状态存在之前注册子状态。它将对它们进行排队,一旦注册了父状态,就会注册该父状态的子状态。
If you register only a single state,likecontacts.list
,you MUST define a state calledcontacts
at some point,or else no states will be registered. The statecontacts.list
will get queued untilcontacts
is defined. you will not see any errors if you do this,so be careful that you define the parent in order for the child to get properly registered.
如果只注册单个状态 (如 "contacts.list"),则必须在某个点定义一个称为 "contacts" 的状态,否则将不注册任何状态。状态contacts.list将被排入队列,直到定义了contacts状态。如果您没有定义contacts状态,您将看不到任何错误,因此请谨慎地定义父状态,以便使子状态正确注册。
No two states can have the same name. When using dot notation theparent
is inferred,but this doesn't change the name of the state. When explicitly providing a parent using theparent
property,state names still must be unique. For example,you can't have two different states named "edit" even if they have different parents.
When the application is in a particular state—when a state is "active"—all of its ancestor states are implicitly active as well. Below,when the "contacts.list" state is active,the "contacts" state is implicitly active as well,because it's the parent state to "contacts.list".
当应用程序状态处于“活动状态”时,其所有的祖先状态也都是隐式的活动。下面,当“contacts.list”状态是活动的,“contacts”状态也是隐式活动的,因为它是“contacts.list”的父状态。
Child states will load their templates into their parent'sui-view
.
子状态将把它们的模板加载到父视图中。
完整示例请参见:http://plnkr.co/edit/7FD5Wf?p=preview
Child statesDOinherit the following from parent states:
子状态从父状态继承以下内容:
Nothing else is inherited (no controllers,templates,url,etC). However,children ofabstract statesdo inherit theurl
property of their parent as a prefix of their ownurl
.
除此之外没有别的东西可继承 (包括控制器、模板、url 等)。然而,抽象状态的子状态确实继承其父状态的 url 属性作为其自己的 url 的前缀。
New in version 0.2.0
Child states will inherit resolved dependencies from parent state(s),which they can overwrite. You can then inject resolved dependencies into the controllers and resolve functions of child states.
子状态将从父状态(s)继承已解析的依赖项,它们可以覆盖这些依赖项。然后,您可以将解析的依赖项注入控制器,并解析子状态的函数。
NOTE
注意:
resolve
keyword MUST be relative tostate
notviews
(in case you use multiple views).Child states will inherit data properties from parent state(s),which they can overwrite.
子状态将从父状态继承数据属性,子状态可以覆盖它们。
Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesTing of your states and everything to do with the nesTing of your views (templates).
请记住,如果您的状态的视图是嵌套的,那么范围属性只继承状态链。范围属性的继承与您的状态的嵌套无关,与您的视图的嵌套(模板)有关。
it isentirely possiblethat you have nested states whose templates populate ui-views at varIoUs non-nested LOCATIOns within your site. In this scenario you cAnnot expect to access the scope variables of parent state views within the views of children states.
您可能有嵌套的状态,它们的模板在您的站点内的不同的非嵌套位置填充ui-view。在这个场景中,您不能期望在子状态视图中访问父状态视图的范围变量。
Views@H_324_23@mayinherit resolved dependencies from the state that they belong to,but@H_324_23@may notinherit those of their sibling views.
视图可以从它们所属的状态继承已解析的依赖项,但可能不会继承它们的兄弟视图。
An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. it is activated implicitly when one of its descendants are activated.
抽象状态可以有子状态,但不能被激活。一个“抽象”的状态就是一个不能被主动激活的状态。当它的一个后代被激活时,它会被隐式激活。
Some examples of how you might use an abstract state are:
一些关于如何使用抽象状态的例子是:
ui-view(s)
that its child states will populate.controller
to the template. The controller@H_324_23@mustpair to a template.resolve
for use by child states.data
for use by child states or an event listener.onEnter
oronExit
function that may modify the application in someway.Remember:Abstract states still need their own<ui-view/>
for their children to plug into. So if you are using an abstract state just to prepend a url,set resolves/data,or run an onEnter/Exit function,then you'll additionally need to settemplate: "<ui-view/>"
.
请记住:抽象的状态仍然需要他们自己的孩子去插入。因此,如果您正在使用一个抽象的状态来预先设置一个url,设置resolves/data,或者运行一个onEnter/Exit函数,那么您还需要设置模板:“
To prepend url to child state urls
将 url 追加到子状态 url
To insert a template with its ownui-view
for child states to populate
要插入一个带有自己的ui-view的模板来填充子状态
Combination
组合
Shows prepended url,inserted template,paired controller,and inherited $scope object.
显示预先输入的url、插入的模板、成对的控制器和继承的$scope对象。
完整示例请参见:http://plnkr.co/edit/gmtcE2?p=preview
探讨请加微信:
以上是大佬教程为你收集整理的2、Angular-Ui Router 嵌套状态和嵌套视图全部内容,希望文章能够帮你解决2、Angular-Ui Router 嵌套状态和嵌套视图所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。