Angular UI-Router:URL 已更改但未加载视图 [英] Angular UI-Router : URL changed but view isn't loaded
问题描述
我正在使用嵌套视图处理我的 UI-Router 应用程序.我定义了一些这样的状态:
I'm working on my UI-Router app with nested views. I defined some states like this:
$stateProvider
.state('parent', {
url: "/parent",
views: {
'area1': {templateUrl : 'parentView.html'},
'area2' : ... // some other areas + template
}
})
.state('parent.child1', {
url: "/child1",
views: {
'area1' : {templateUrl : 'child1View.html'},
'area2' : ... // still some other areas, not changing
}
})
.state('parent.child2', {
url: "/child2",
views: {
'area1' : {templateUrl : 'child2View.html'},
'area2' : ... // still some other areas, not changing
}
})
在使用该应用程序时，我的主视图分为几个区域.在第一个区域，我使用了一个特定的 html 文件.如果我点击一个链接，应用程序会使用 $state.go('myState') 进入子状态.那时，URL 已更改，但页面中未加载子视图.
When using the app, I have a main view divided into some areas. In the 1st area, I use a specific html file. If I click on a link, the app goes to a child state using $state.go('myState'). At that time, the URL is changed but the child view isn't loaded in the page.
我在网站上搜索了答案，我从另一个似乎遇到同样问题的人那里找到了这个问题:Angular Router - Url 更改但视图未加载
I searched for answers in the site, and I found this question from another one who seems to encounter the same problem here : Angular Router - Url changes but view does not load
你知道我错过了什么吗?
Do you know what I missed?
抱歉英语不好
推荐答案
index.html 很可能包含以下目标:
Most likely the index.html contains these targets:
<body>
<div ui-view="area1"></div>
<div ui-view="area2"></div>
...
所以，如果父母和孩子都针对这些，我们需要使用绝对命名:
So, if both, parent and child do target these, we need to use absolute naming:
.state('parent.child1', {
url: "/child1",
views: {
'area1@' : {template : '<h2>child 1 area 1 </h2>'},
'area2@' : {template : '<h2>child 1 area 2</h2>'},
}
})
.state('parent.child2', {
url: "/child2",
views: {
'area1@' : {template : '<h2>child 2 area 1 </h2>'},
'area2@' : {template : '<h2>child 2 area 2</h2>'},
}
})
让我们观察文档:
在幕后，每个视图都被分配一个绝对名称，遵循 viewname@statename 方案，其中 viewname 是视图指令和状态名称中使用的名称是状态的绝对名称，例如联系方式.您还可以选择以绝对语法编写视图名称.
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.
例如，前面的例子也可以写成:
For example, the previous example could also be written as:
.state('report',{
views: {
'filters@': { },
'tabledata@': { },
'graph@': { }
}
})
因此，我们的孩子需要使用 1) 查看目标名称 2) 分隔符 @ 和 3) 状态名称 (在我们的字符串中为空代表根):'area1@'
So, our child needs to use 1) view target Name 2) delimiter @ and 3) the state name (in our string empty representing the root): 'area1@'
这些类似于 $state.go() 的链接现在可以使用了:
These links, similar to $state.go() will work now:
<a ui-sref="parent">
<a ui-sref="parent.child1">
<a ui-sref="parent.child2">
在这里
这篇关于Angular UI-Router:URL 已更改但未加载视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
