I have created a custom uib modal in my angularjs application. The body and footer content of the modal need to change based on certain conditions so I have implemented it this way for now. Everything seems to be functioning correctly, but I want to ensure that I am following best practices...
When a button inside the modal is clicked, I am checking the text of the clicked button. I do not want the modal to be treated as a directive.
HTML snippet
<div class="modal-header" >
<button type="button" class="close" ng-click="close()" data-dismiss="modal">×</button>
<h4><b>{{customModal.title}}</b></h4>
</div>
<div class="modal-body">
{{customModal.body}}
</div>
<div class="modal-footer" >
<span ng-repeat="item in customModal.buttons">
<button type="button" class="{{item.btnClass}}" ng-click="modalBtnClick(customModal,item);close()" data-dismiss="modal" ng-if="item.show">{{item.text}}</button>
<span>
</div>
Invoke the modal upon clicking.....
$scope.areYouSureModalInstance = $uibModal.open({
animation: true,
templateUrl: 'views/Modal.html',
controller: 'ModalCtrl',
windowClass: 'nested-modal',
scope: $scope,
resolve: {
items: function() {
let btns=[
{id:1,text:"Yes",show:true, btnClass:"btn btn-success"},
{id:2,text:"No",show:true, btnClass:"btn btn-danger"},
{id:3,text:"Cancel",show:true, btnClass:"btn btn-default"}
];
$scope.customModal = {
id:'confirm',
title:'Confirm',
body:'Do you want to save the changes you have made?',
buttons:btns
};
//passing the modal properties
return $scope.customModal;
}
}
});
//Inside the uib modal controller
function ModalCtrl($scope) {
$scope.close = function() {
$scope.areYouSureModalInstance.close();
};
$scope.modalBtnClick=function(data,btn){
if(data.id==="confirm"){
$scope.$emit('close.confirm',btn);
}
};
}
//When a user clicks on any button
$scope.$on('close.confirm', function(event, data) {
if (data.text.toLowerCase()==="no") {
//perform some actions here
}
if (data.text.toLowerCase()==="yes") {
//perform some actions here
}
$scope.modalInstance.close();
});
Is there a more efficient approach to achieve this with two controllers without using the modal as a directive?