在 $stateProvider.state 中分配多个控制器

Question

对于高级 angular 用户来说，这可能是一个简单的问题，但我没有找到对这个问题有很好解释的地方。

所以我正在重组我的代码，当我意识到我在一个视图中有两个控制器时，这不是问题，当控制器 'ACtrl' 被 $stateProvider 和控制器 'BCtrl' 绑定时由 ng-controller 绑定在视图中。但是当我尝试像这样在 $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' 也在其他地方使用，所以我不得不在其他地方重复一遍。我该如何解决这个问题...

Answer 1

拆分您的布局并使用类似的东西：

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

Answer 2

从语法上讲，它不起作用。这（语法上）可以工作：

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

但是 AngularJS 使用 ZERO 或 ONE 控制器 DOMElement.

您可以为 A 视图分配 CtrlA :

$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>

在 $stateProvider.state 中分配多个控制器

Assign multiple controller in $stateProvider.state

angularjs

angularjs-routing

angularjs-controller

angular-routing