Introduction
- Task: Give a confirmation pop-up on deletion of every component in the project.
- Challenge: All different components have different delete functions with different set of parameters.
Using the Code
Solution
Step 1
Create an Angular Service and common confirmation popup HTML as we want this similar confirmation message functionality to be shared throughout the Angular application.
Angular Service
AngularApplicationModulePointer.service('ConfirmationService', function (ngDialog) {
var DeletePopUpConfiguration = {
template: '/app/views/confirmationPopup.html',
controller: function ($scope, ConfirmationService) {
$scope.confirmationPopupModel = {
PopUpTitle: ConfirmationService.PopUpTitle,
ConfirmationMessage: ConfirmationService.ConfirmationMessage,
callbackFuncExecute: function () { ConfirmationService.callbackFuncExecute(); },
closeConfirmationPopup: function () { ConfirmationService.closeConfirmationPopup(); },
ConfirmButtonText: ConfirmationService.ConfirmButtonText,
DenyButtonText: ConfirmationService.DenyButtonText
};
},
className: 'ngdialog-theme-plain',
width: 500,
showClose: true,
closeByDocument: false,
closeByEscape: false,
};
this.messageType = '';
var MessageDictionary =
{
MessageA: "Are you sure you want to delete component A?",
MessageB: "Are you sure you want to delete component B?",
};
var getMessage = function (messageType)
{
var message = MessageDictionary[messageType];
return message;
};
this.openConfirmationPopup = function (callbackFunction, callbackFunctionparameters) {
this.Message = getMessage(this.messageType);
this.callbackFunction = callbackFunction;
this.funcParameters = callbackFunctionparameters;
this.DeletePopUpPointer = ngDialog.open(DeletePopUpConfiguration);
};
this.callbackFuncExecute = function () {
var callbackFunction = this.callbackFunction;
var funcParameters = this.funcParameters;
callbackFunction.apply(this, funcParameters);
this.DeletePopUpPointer.close();
};
this.closeConfirmationPopup = function () {
this.DeletePopUpPointer.close();
};
});
/app/views/confirmationPopup.html
<div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<h4>{{confirmationPopupModel.PopUpTitle}}</h4>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<p style="line-height: 20px;">
{{confirmationPopupModel.ConfirmationMessage}}<br />
</p>
</div>
</div>
</div>
<div>
<button class="btn btn-blue" type="button"
ng-click="confirmationPopupModel.callbackFuncExecute()">
{{confirmationPopupModel.ConfirmButtonText}}</button>
<button type="button" class="ngdialog-button btn btn-light-grey"
ng-click="confirmationPopupModel.closeConfirmationPopup()">
{{confirmationPopupModel.DenyButtonText}}</button>
</div>
</div>
Step 2: Using the Created Angular Service
ComponentA.html
<button type="button" title="Delete" class="btn btn-blue"
ng-click="vm.ComponentAModel.ConfirmDelete(param1,param2)">Delete</button>
ComponentACtrl.js
AngularApplicationModulePointer.Controller('ComponentAController',
['$scope', '$q', 'ngDialog','ConfirmationService',
function ComponentAController($scope, $q, ngDialog, ConfirmationService) {
var vm= this;
vm.ComponentAModel= {
DeleteFunction: function (param1,param2) {
},
ConfirmDelete: function (param1,param2) {
ConfirmationService.PopUpTitle = "Delete Component A";
ConfirmationService.messageType = "MessageA";
ConfirmationService.ConfirmButtonText = "Yes";
ConfirmationService.DenyButtonText = "No";
var paramArray = [param1,param2];
ConfirmationService.openConfirmationPopup(vm.ComponentAModel.DeleteFunction,paramArray);
},
}
return vm;
});
The code flow is:
- When the delete button on the ComponentA.html is clicked, the function sets the Pop-up title, confirmation message type and Button texts, using the Angular Service variables.
- Then in
paramArray
, we capture all the parameters that the Delete
function accepts in the same order of input parameters of the Delete
Function. - Then we call the function to open Confirmation Pop-up with
delete
function as closure and paramArray
as second input parameter. - Now the open Pop-up function will set/bind all the fields and functions with the confirmation Pop-up. Then opens the pop-up.
- If the User clicks on “Yes”, the
callbackFuncExecute()
will be called. - The
callbackFuncExecute()
now using the JavaScript apply()
binds the callbackFunction
(the DeleteFunction
) with the funcParameters
(the paramArray
) and executes the DeleteFunction
.
Note: ngDialog
is the third party js used for pop-up.
Points of Interest
Combination of Angular Service, JavaScript closure and apply()
provided us the freedom to execute different signatured functions outside their scopes.
History
Coding is Art. Be creative. Learn new things.