Javascript 使用ui路由器可重用的子状态

我正在使用ui路由器对AngularJS进行应用程序状态管理。我有一组特定的状态，在整个应用程序的许多地方都以模态的形式出现。

.modal

状态是一个抽象的父状态，有几个选项卡状态是它的子状态：

.modal.tab1

，

.modal.tab2

，等等

我当前的实现需要复制我的

$stateProvider

中的所有模式状态，如下所示：

main (/)
  main.page1 (/page1)
    main.page1.modal (abstract)
      main.page1.modal.tab1 (/page1/modal/tab1)
      main.page1.modal.tab2 (/page1/modal/tab2)
      main.page1.modal.tab3 (/page1/modal/tab3)
      main.page1.modal.tab4 (/page1/modal/tab4)
      ...
  main.page2 (/page2)
    main.page2.modal (abstract)
      main.page2.modal.tab1 (/page2/modal/tab1)
      main.page2.modal.tab2 (/page2/modal/tab2)
      ...

这是我想要的url结构和状态继承，因为我想在模式出现时看到它背后的正确内容。但是，正如你所看到的，每一页都会大大增加我需要发表的国家声明的数量

有没有办法只声明一次这些状态，然后将它们附加到多个父级？按照这些思路，某些东西可能是理想的：

main (/)
  main.page1 (/page1)
  main.page2 (/page2)

.modal (*/modal) parent:[main.page1,main.page2]
  modal.tab1 (*/modal/tab1)
  modal.tab2 (*/modal/tab2)
  ...

这样做可能吗？我的另一个想法是在代码顶部声明所有模态状态配置对象，然后将这些对象传递到

$stateProvider

中的相关状态。它并不能真正实现我想要的，但至少可以减少重复代码的数量。

遵循以下方法： 1.声明所有选项卡 2.声明所有页面 3.循环浏览每个页面并添加到状态，在页面的每次迭代中，将所有选项卡添加到当前页面

这样，您就可以将所有选项卡添加到所有页面中

var tabs = {
    ".modal/tab1": {
        url: "/modal/tab1",
        templateUrl: "tab1.html"
    },
    ".modal/tab2": {
        url: "/modal/tab2",
        templateUrl: "tab2.html"
    }
};

var pages = {
    "page1": {
        url: "/page1",
        templateUrl: "page1.html"
    },
    "page2": {
        state: "page2",
        url: "/page2",
        templateUrl: "page2.html"
    }
}

for(var key in pages){       //loop through all the pages
    var state = key;         //state of page
    var options = pages[key];   //{url,templateURL} etc

    $stateProvider.state(state,options);   //add pages to states

    for(var keyTab in tabs){     //now loop through all the tabs and add to current page
        var stateTabs = state + keyTab;    // e.g. "page"+".modal/tab1" for page1 i.e. "page1.modal/tab1
        var optionsTab = tabs[keyTab];
        optionsTab.url = options.url + optionsTab.url;  //appended url to show i.e. "/page1/modal/tab1"

        $stateProvider.state(stateTabs.optionsTab);  //add each tab to page here
    }
}