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, как это происходит, то есть вещи, которые находятся в их контроллерах, запускаются снова.

Как правильно организовать маршрутизатор, чтобы предотвратить это?

пока

$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 и будьте осторожны с запятыми в вашем коде:)