How to use multiple controller in one directive angularjs? - angularjs

Question

Is it correct to use multiple controllers like below?
<div ng-if="actionButtonText=='Confirm'" ng-controller="upsrCtrl" ng-controller="pt3Ctrl" ng-controller="spmCtrl">
<button ng-click="checkAnswer()" class="button button-confirm-outline">
{{actionButtonText}}
</button>
</div>
The reason I used these were I make this as footer and the content change dynamically based on different controller.

Answer 1

I'm assuming your ng-if handles the switch on which ng-controller to use. And the ng-clickis the event that triggers the switch. If thats the case just render all 3 blocks only show based on parentCtrl.
<div ng-controller="parentCtrl">
<div ng-if="parentCtrl.actionButtonText=='upsrCtrl'" ng-controller="upsrCtrl">
<button ng-click="checkAnswer()" class="button button-confirm-outline">
{{actionButtonText}}
</button>
</div>
<div ng-if="parentCtrl.actionButtonText=='pt3Ctrl'" ng-controller="pt3Ctrl">
<button ng-click="checkAnswer()" class="button button-confirm-outline">
{{actionButtonText}}
</button>
</div>
<div ng-if="parentCtrl.actionButtonText=='spmCtrl'" ng-controller="spmCtrl">
<button ng-click="checkAnswer()" class="button button-confirm-outline">
{{actionButtonText}}
</button>
</div>
</div>

Answer 2

Providing wrappers of controller may be a way to find your solution. But if you will see it on element level, An element can not carry more then one one controller.
As i can see there is a way To make one controller the main controller and pass another controller as some other parameter. like vm i used in bellow example . Here vm is is the page level controller instance(controller of the page where the element is present). use Isolated scope here to access vm
<div ng-if="actionButtonText=='Confirm'" ng-controller="upsrCtrl">
<button ng-click="checkAnswer()" class="button button-confirm-outline" vm='vm'>
{{actionButtonText}}
</button>
</div>
But the better way i will suggest is To use more then one directive with its separate controllers and use it. It will be some kind of attribute level directive. which will make your purpose solve.
app.directive('dirUp', function() {
return {
controller: function(scope) {
//directive controller
}
};
});
app.directive('dirDown', function() {
return {
controller: function(scope) {
//directive controller
}
};
});
and in html
<div dir-up use-down></div>
Hope it will help you.

Answer 3

Try to use custom directive like below. Take a look on a plunker:
https://plnkr.co/edit/ileyNcaSlJYLc2bCbJeq?p=preview
app.directive('ifController', function factory($compile) {
var handler = {
restrict: 'A',
scope: {
ifController: '#'
},
link: function(scope, element, attrs){
var lastElement = null;
var update = function() {
if (lastElement !== null) {
lastElement.remove();
}
var template = '<div ng-controller="' + scope.ifController + '">'+
'<button ng-click="checkAnswer()" class="button button-confirm-outline">'+
'{{actionButtonText}}'+
'</button>' +
'</div>';
var linkFn = $compile(template);
var content = linkFn(scope);
element.append(content);
lastElement = content;
}
scope.$watch('ifController', update);
}
};
return handler;
});
You can set controller by passing a variable to if-contoller like below:
<div if-controller="{{controller}}">
This will remove previous build of element and compile a new one with a new one controller. Also you can modify this directive to use it as a wrapper to another directive you with to use (just change template).