如何使用 Angular Ui-Router 减少具有相同“templateUrl"的“状态"数量 [英] How to reduce number of 'states' with same 'templateUrl' using Angular Ui-Router
问题描述
好吧,我需要一些关于 Angular UI-Roter 路由问题的帮助.嗯,其实不是问题,更多的是减少代码.
Well, I need some help about a routing problem with Angular UI-Roter. Well, actually is not a problem, it's more about to reduce code.
我有三个子状态:
- main.tab1.hello
- main.tab2.hello
- main.tab3.hello
并且它们有相同的 'templateUrl'
: 'hello.html'
and they have in common the same 'templateUrl'
: 'hello.html'
我想知道是否可以仅在一种状态下减少它们,当然,当我单击按钮时,我不想更改 URL.
I want to know if is possible to reduce them in only one state, and of course, when I click the button, I don't want to change the URL.
这是我的 Plunkr:http://plnkr.co/edit/ej7pCo1RRXPTBL6p8dsL
Here is my Plunkr: http://plnkr.co/edit/ej7pCo1RRXPTBL6p8dsL
任何帮助将不胜感激.
推荐答案
...嗯,其实不是问题,更多的是关于减少代码.
一般来说,我建议使用一些状态名称的array
,然后对其进行迭代以创建其所有子项:
In general, I would suggest to use some array
of state names and just iterate that to create all its children:
var states = ["main.tab1", "main.tab2", "main.tab3"]
states.forEach(function(parentName){
$stateProvider
.state(parentName + ".hello", {
views: {
"viewC@main": {
templateUrl:"hello.html"
}
},
})
})
有更新的plunker采用这种方法
但是还有更复杂的方法,可以从内置功能中获益:
But there are even more sophisticated approaches, profiting from built in feature:
有详细解释的工作示例:
There are working examples with detailed explanation:
这篇关于如何使用 Angular Ui-Router 减少具有相同“templateUrl"的“状态"数量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!