angularjs - Angular UI-Router 多个命名 View

Question

期望的行为

我正在使用 AngularJS 和 Angular UI-Router。

1. 我希望允许两个子状态共享一个父状态。
2. 我希望子状态用自己的 View 填充父状态 View 中的 ui-view。
3. 我希望两个子状态之一的 View 中有三个 ui-view，每个 View 都填充有 View 。

尝试绘制图表:

Parent: <ui-view>
        filled by
          Child:  <ui-view> <ui-view> <ui-view>
                    filled    filled   filled

我的具体情况

我有一个名为category-details的状态。在这个抽象状态的 View 中，我有一个未命名的ui-view。在两个子状态之一 (category-details.selected)，我想使用 multiple named views .

当前工作策略

这是抽象状态。非常基本，但仅供您引用。

.state('category-details', {
    abstract: true,
    data: {
        pageTitle: 'Category Details'
    },
    templateUrl: "views/category-details.html",
})

在category-details.selected状态(将具有多个命名 View 的状态)，我设置了category-details的未命名ui-view .html 到 category-details-selected.html:

.state('category-details.selected', {
    views: {
        '': {
            templateUrl: 'views/category-details-selected.html',
            controller: 'CategoryDetailsSelectedCtrl'
        }
    }
})

在category-details-selected.html View 内部，我有三个名为ui-views:

<div ui-view="firstNamedView"></div>
<div ui-view="secondNamedView"></div>
<div ui-view="thirdNamedView"></div>

最后，我定义了一个状态来设置这三个 ui-view 以满足我所需行为的第三部分:

.state('category-details.selected.aspect', {
    url:"/category-details/:selectedCategory",
    views: {
        'firstNamedView': {
            templateUrl: 'views/first-named-view.html',
            controller: 'FirstNamedViewCtrl'
        },
        'secondNamedView': {
            templateUrl: 'views/second-named-view.html',
            controller: 'SecondNamedViewCtrl'
        },
        'thirdNamedView': {
            templateUrl: 'views/third-named-view.html',
            controller: 'ThirdNamedViewCtrl'
        }
    }
});

为什么我的解决方案笨拙且次优

添加category-details.selected.aspect状态以设置category-details-selected的常量元素(三个ui-view) View 是不必要的。每次我想要多个命名 View 时，它都会强制创建一个额外的状态。

我尝试过的

我相信我应该能够将 category-details.selected.aspect 状态的 url 和 View 移动到其父状态的 views 组件中(category-details.selected)。这看起来像:

.state('category-details.selected', {
    url:"/category-details/:selectedCategory",
    views: {
        '': {
            templateUrl: 'views/category-details-selected.html',
            controller: 'CategoryDetailsSelectedCtrl'
        },
        'firstNamedView': {
            templateUrl: 'views/first-named-view.html',
            controller: 'FirstNamedViewCtrl'
        },
        'secondNamedView': {
            templateUrl: 'views/second-named-view.html',
            controller: 'SecondNamedViewCtrl'
        },
        'thirdNamedView': {
            templateUrl: 'views/third-named-view.html',
            controller: 'ThirdNamedViewCtrl'
        }
    }
})

这导致未命名的 ui-view 被正确设置，但三个命名的 ui-view 未填充。

由于选择三个名为 ui-view 的问题，然后我尝试使用 绝对选择器 described here 选择它们反而。这并没有解决问题。我尝试过:

firstNamedView
firstNamedView@
firstNamedView@category-details.selected
(others of course)

结束语

我想象的是否可行，是否有其他更好的方法，或者我当前的方法是最好的吗？它归结为分配同时设置的父 ui-view 的子 ui-view。我认为最后一句单独来说太困惑了，所以我包含了整个示例。

如果我可以提供更多说明(例如版本)，请告诉我。谢谢。

Answer 1

Abstract states need their own <ui-view/> for their children to plug into.

父状态category-details是 abstract状态。子状态将需要一些引用 ui-view 来插入该状态。我相信你的观点/category-details.html没有任何 ui-view (正如您所提到的 category-details-selected.html 包含 ui-view)。

试试这个:

.state('category-details', {
  abstract: true,
  data: {
    pageTitle: 'Category Details'
  },
  templateUrl: "views/category-details-selected.html",
})

.state('category-details.selected', {
  url:"/category-details/:selectedCategory",
  views: {       
    'firstNamedView': {
        templateUrl: 'views/first-named-view.html',
        controller: 'FirstNamedViewCtrl'
    },
    'secondNamedView': {
        templateUrl: 'views/second-named-view.html',
        controller: 'SecondNamedViewCtrl'
    },
    'thirdNamedView': {
        templateUrl: 'views/third-named-view.html',
        controller: 'ThirdNamedViewCtrl'
    }
  }
})

在这里，我们为抽象 View 提供一个模板，其中包含 ui-view，供 subview 填充。

查看 ui-router: Abstract State 的文档了解更多信息。

<小时/>

编辑:我假设 views/category-details.html不包含任何用户界面 View 。然而，随后有人指出，views/views/category-details.html确实有 ui-view

这对我有用:

类别详细信息.html:

<div ui-view=""></div>

类别详细信息-selected.html:

<div ui-view="firstNamedView"></div>
<div ui-view="secondNamedView"></div>
<div ui-view="thirdNamedView"></div>

路由器:

    .state('category-details', {
        abstract: true,
        data: {
            pageTitle: 'Category Details'
        },
        templateUrl: "../app/atest/category-details.html",
    })


    .state('category-details.selected', {
        url: "/atest",
        views: {
            '': {
                templateUrl: "../app/atest/category-details-selected.html",
                //   controller: 'approvalsCtrl as vm',
            },
            'firstNamedView@category-details.selected': {
                templateUrl: '../app/atest/first.html',
                //    controller: 'approvalsCtrl as vm',
            },
            'secondNamedView@category-details.selected': {
                templateUrl: '../app/atest/second.html',
                //   controller: 'approvalsCtrl as vm',
            },
            'thirdNamedView@category-details.selected': {
                templateUrl: '../app/atest/third.html',
                //   controller: 'approvalsCtrl as vm',
            }
        }
    })

我可以看到您提到您尝试过使用 firstNamedView@category-details.selected ，但它对你不起作用。上面的例子对我有用。检查您是否category-details.html和category-details-selected.html查看包含正确的ui-view .