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