INQUIRY
How can you trigger a button click that performs different actions depending on which Controller is present in the view?
SITUATION
I am working with two directives/controllers that use the same template view. The data is displaying correctly, but the ng-click="{{::vm.action}}" does not function when clicked. If I modify it to ng-click="{{::vm.action()}}", the view breaks.
CODE
main.html
<confirm-modal></confirm-modal>
<error-modal></error-modal>
modal.html:
<article>
<h1>{{::title}}</h1>
<p>{{::body}}</p>
<button ng-click="{{::action}}">{{::button}}</button>
</article>
confirm-modal.directive.js (and controller)
angular
.module('common.modal')
.controller('ConfirmModalController', ConfirmModalController)
.directive('confirmModal', confirmModal);
/* @ngInject */
function confirmModal() {
var directive = {
templateUrl: 'app/widgets/modals/modal.html',
restrict: 'E',
controller: ConfirmModalController,
controllerAs: 'vm',
bindToController: true
};
return directive;
}
function ConfirmModalController(modalService) {
var vm = this;
vm.title = 'Confirm Your Subscription';
vm.body = '$8.99 per month will be billed to your account.';
vm.button = 'Subscribe';
vm.action = function () {
console.log('confirm subscription');
modalService.confirmSubscription();
};
}
error-modal.directive.js (and controller)
angular
.module('common.modal')
.controller('ErrorModalController', ErrorModalController)
.directive('errorModal', errorModal);
/* @ngInject */
function errorModal() {
var directive = {
templateUrl: 'app/widgets/modals/modal.html',
restrict: 'E',
controller: ErrorModalController,
controllerAs: 'vm',
bindToController: true
};
return directive;
}
function ErrorModalController(modalService) {
var vm = this;
vm.title = 'There was an error with your request';
vm.body = 'Please contact administrator regarding this error';
vm.button = 'Dismiss';
vm.action = function () {
console.log('error on subscription');
modalService.closeAllModals();
};
}