Probably this is an easy question for advanced angular users, but I did not find this issue somewhere well explained.
So I was restructuring my code, when I realized, I
Syntaxically, it can't work. This (syntaxically) could work :
$stateProvider.state('a.view', {
url: "/anurl",
views: {
'menuContent': {
templateUrl: "anUrlToMyTemplates",
controller: ['ACtrl', 'BCtrl']
}
}
});
But AngularJS use ZERO or ONE controller by DOMElement
.
You can assign CtrlA
for your A
view :
$stateProvider.state('a.view', {
url: "/anurl",
views: {
'menuContent': {
templateUrl: "anUrlToMyTemplates",
controller: 'ACtrl'
}
}
});
And then into your A
view :
<div data-ng-controller="BCtrl">
<!-- your view content -->
</div>
That said, for code design purpose, the correct way is to merge the actions of your two controllers in only one if they have to control the same template elements. If they control different parts of the template, use one controller for one part, or a controller for the whole view, and an other for the specific part :
<!-- 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>
Split your layout and use something like:
.state('app.somestate', {
url : '/someurl',
views:{
'menuContent': {
templateUrl: 'part1.html',
controller: 'ACtrl'
},
'otherContent': {
templateUrl: 'part2.html',
controller: 'BCtrl'
},
'someotherContent': {
templateUrl: 'part3.html',
controller: 'CCtrl'
}
}
})