javascript - angular-ui-router嵌套 View

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

html

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

这两个状态称为列表和创建。在两种状态下，视图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"
            }
        }
    })

最佳答案

为此，您基本上需要将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并注意代码中的逗号:)