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

bur*_*DLX 13 angularjs angular-routing angularjs-routing angularjs-controller

对于高级角度用户来说,这可能是一个简单的问题,但我没有在某个地方找到这个问题.

所以我正在重构我的代码,当我意识到,我在视图中有两个控制器,这不是问题,当控制器'ACtrl'被$ stateProvider绑定并且控制器'BCtrl'在视图中通过ng-controller绑定.但是当我尝试在$ stateProvider中分配它们时,如下所示:

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

或者那个:

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

它不会起作用.

我知道这将是一个解决方案,使控制器的内容达到一个,但控制器'ACtrl'也在其他地方使用,所以我不得不在其他地方重复自己.我该怎么解决这个问题......

Rém*_*ras 17

语法上,它无法工作.这(语法上)可以工作:

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

但AngularJS使用ZEROONE控制器DOMElement.

您可以CtrlA为您的A视图指定:

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

然后进入你的A观点:

<div data-ng-controller="BCtrl">
    <!-- your view content -->
</div>
Run Code Online (Sandbox Code Playgroud)

也就是说,出于代码设计的目的,如果必须控制相同的模板元素,则正确的方法是将两个控制器的操作合并为一个.如果它们控制模板的不同部分,则对一个部件使用一个控制器,对整个视图使用控制器,对于特定部件使用另一个控制器:

<!-- 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>
Run Code Online (Sandbox Code Playgroud)


Ioa*_*zan 9

拆分布局并使用如下内容:

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