Question

我正在使用ui-router进行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中的相关状态。它不会真正完成我正在寻找的东西，但它至少会减少重复代码的数量。

Answer 1

遵循这种方法： 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
    }
}

可重复使用的子状态与ui-router

1 个答案: