javascript - angular-ui-router 嵌套 View

Question

我的应用有 3 个 View (A、B、C)和 2 个状态(1,2)

html

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

这两种状态称为列表和创建。在这两种状态下， View A + B 的模板和 Controller 保持不变，但 View c 应该更改模板和 Controller 。我可以让 View c 的内容发生变化，但它会刷新 View A 和 View B，因为它们的 Controller 中的内容会再次运行。

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

目前为止

$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，我们正在制作一个占位符，它将包含我们的嵌套 View (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并注意代码中的逗号 :)