如何使用 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.

我有三个子状态:

1. ma​​in.tab1.hello
2. ma​​in.tab2.hello
3. ma​​in.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:

• 如何在 UI-Router 中装饰当前状态解析函数?当前函数未被调用
• AngularJS:如何在 UI-Router 中将一个状态设置为全局父状态(将模态用作公共部分)

这篇关于如何使用 Angular Ui-Router 减少具有相同“templateUrl"的“状态"数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！