Назначить несколько контроллеров в $stateProvider.state

Вероятно, это простой вопрос для продвинутых пользователей angular, но я не нашел эту проблему хорошо объясненной.

Итак, я изменил свой код, когда понял, у меня есть два контроллера в представлении, что не является проблемой, когда контроллер ACtrl 'привязан $stateProvider и контроллером' BCtrl 'привязан в представлении нг-контроллер. Но когда я пытаюсь назначить их в $stateProvider следующим образом:

$stateProvider.state('a.view', {
    url: "/anurl",
    views: {
        'menuContent': {
            templateUrl: "anUrlToMyTemplates",
            controller: 'ACtrl', 'BCtrl'
        }
    }
});

или что:

$stateProvider.state('a.view', {
    url: "/anurl",
    views: {
        'menuContent': {
            templateUrl: "anUrlToMyTemplates",
            controller: 'ACtrl',
            controller: 'BCtrl'
        }
    }
});

он не будет работать.

Я знаю, что это было бы решение сделать содержимое контроллеров до одного, но контроллер "ACtrl" также используется в другом месте, поэтому мне пришлось бы повторять себя где-то в другом месте. Как я могу решить эту проблему...

Ответ 1

Синтаксически это не сработает. Это (синтаксически) могло бы работать:

$stateProvider.state('a.view', {
    url: "/anurl",
    views: {
        'menuContent': {
            templateUrl: "anUrlToMyTemplates",
            controller: ['ACtrl', 'BCtrl']
        }
    }
});

Но AngularJS использует ZERO или ОДИН контроллер DOMElement.

Вы можете назначить CtrlA для вашего представления A:

$stateProvider.state('a.view', {
    url: "/anurl",
    views: {
        'menuContent': {
            templateUrl: "anUrlToMyTemplates",
            controller: 'ACtrl'
        }
    }
});

И затем в ваш A вид:

<div data-ng-controller="BCtrl">
    <!-- your view content -->
</div>

Тем не менее, для целей проектирования кода правильным способом является объединение действий ваших двух контроллеров только в одном, если они должны управлять теми же элементами шаблона. Если они управляют разными частями шаблона, используйте один контроллер для одной части или контроллер для всего представления, а другой для конкретной части:

<!-- your view controlled by ACtrl configured in route provider -->
<div> 
    <!-- your view content, part A -->

    <div data-ng-controller="BCtrl">
        <!-- your view content, part B -->
    </div>
</div>

Ответ 2

Разделите свой макет и используйте что-то вроде:

.state('app.somestate', {
            url : '/someurl',
            views:{
                'menuContent': {
                    templateUrl: 'part1.html',
                    controller: 'ACtrl'
                },
                'otherContent': {
                    templateUrl: 'part2.html',
                    controller: 'BCtrl'
                },
                'someotherContent': {
                    templateUrl: 'part3.html',
                    controller: 'CCtrl'
                }
            }
        })