angular-ui-router 嵌套视图

Question

我的应用有 3 个视图（A、B、C）和 2 个状态（1,2）

html

<div ui-view="A"></div>
<div ui-view="B"></div>
<div ui-view="C"></div>

这两种状态分别称为list和create。在这两种状态下，视图 A + B 的模板和控制器保持不变，但视图 c 应该更改模板和控制器。我可以更改视图 c 的内容，但它会刷新视图 A 和视图 B，即它们的控制器中的内容再次运行。

组织路由器以防止这种情况的正确方法是什么？

到目前为止的js

$urlRouterProvider.otherwise("/basestate/list");

$stateProvider
    .state('baseState', function() {
        url:"/basestate",
        templateUrl: "basestate.html",
        controller: 'BaseStateCtrl'
    })
    .state('baseState.list', function() {
        url: "/list",
        views: {
            "viewA@baseState": {
                templateUrl: "viewA.html"
                controller: "ViewACtrl"
            },
            "viewB@baseState": {
                templateUrl: "viewB.html"
                controller: "ViewBCtrl"
            },
            "viewC@baseState": {
                templateUrl: "list.html"
                controller: "listCtrl"
            }
        }
    })
    .state('baseState.create', function() {
        url: "/create",
        views: {
            "viewA@baseState": {
                templateUrl: "viewA.html"
                controller: "ViewACtrl"
            },
            "viewB@baseState": {
                templateUrl: "viewB.html"
                controller: "ViewBCtrl"
            },
            "viewC@baseState": {
                templateUrl: "create.html"
                controller: "createCtrl"
            }
        }
    })

Answer 1

要实现这一点，您基本上需要将 viewA 和 viewC 冻结在 baseState 级别，并使该状态抽象：

.state('basestate', {
    url: '/basestate',
    abstract: true,
    views: {
      "viewA": {
        templateUrl: "viewA.html",
        controller: "ViewACtrl"
      },
      "viewB": {
        templateUrl: "viewB.html",
        controller: "ViewBCtrl"
      },
      "viewC": {
        template: '<div ui-view="viewC_child"></div>'
      }
    }
})

请注意，对于 viewC，我们正在创建一个占位符，其中包含我们的嵌套视图（list 或 create）：

.state('basestate.list',{
    url: "/list",
    views: {
        "viewC_child": {
            templateUrl: "list.html",
            controller: "ListCtrl"
        }
    }
})
.state('basestate.create', {
    url: "/create",
    views: {
        "viewC_child": {
            templateUrl: "create.html",
            controller: "CreateCtrl"
        }
    }
})

检查此plunkr 并注意代码中的逗号:)