Create a simple Bootstrap Yes/No confirmation or just notification alert in AngularJS

Question

It's so simple in a non-Angular environment. Just html and a two line of js code to show a modal confirmation dialog on the screen.

Now I am developting an AngularJS project in which I am using ui-bootstrap modal confirmation dialogs all over the place and I am sick of creating new controllers even for simple things like "Are you sure to delete this record?" kind of stuff.

How do you handle these simple situations? I am sure some people wrote some directives to simplify the needs.

I am asking you to share your experiences or the projects you know about that subject.

Answer 1

so create a reusable service for that... read here

code here:

angular.module('yourModuleName').service('modalService', ['$modal', // NB: For Angular-bootstrap 0.14.0 or later, use $uibModal above instead of $modal function ($modal) {      var modalDefaults = {         backdrop: true,         keyboard: true,         modalFade: true,         templateUrl: '/app/partials/modal.html'     };      var modalOptions = {         closeButtonText: 'Close',         actionButtonText: 'OK',         headerText: 'Proceed?',         bodyText: 'Perform this action?'     };      this.showModal = function (customModalDefaults, customModalOptions) {         if (!customModalDefaults) customModalDefaults = {};         customModalDefaults.backdrop = 'static';         return this.show(customModalDefaults, customModalOptions);     };      this.show = function (customModalDefaults, customModalOptions) {         //Create temp objects to work with since we're in a singleton service         var tempModalDefaults = {};         var tempModalOptions = {};          //Map angular-ui modal custom defaults to modal defaults defined in service         angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);          //Map modal.html $scope custom properties to defaults defined in service         angular.extend(tempModalOptions, modalOptions, customModalOptions);          if (!tempModalDefaults.controller) {             tempModalDefaults.controller = function ($scope, $modalInstance) {                 $scope.modalOptions = tempModalOptions;                 $scope.modalOptions.ok = function (result) {                     $modalInstance.close(result);                 };                 $scope.modalOptions.close = function (result) {                     $modalInstance.dismiss('cancel');                 };             };         }          return $modal.open(tempModalDefaults).result;     };  }]); 

html for display

<div class="modal-header">   <h3>{{modalOptions.headerText}}</h3> </div> <div class="modal-body">   <p>{{modalOptions.bodyText}}</p> </div> <div class="modal-footer">   <button type="button" class="btn"            data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>   <button class="btn btn-primary"            data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button> </div> 

once this is done... you just have to inject above service whereever you want to create a dialog box, example below

 $scope.deleteCustomer = function () {      var custName = $scope.customer.firstName + ' ' + $scope.customer.lastName;       var modalOptions = {         closeButtonText: 'Cancel',         actionButtonText: 'Delete Customer',         headerText: 'Delete ' + custName + '?',         bodyText: 'Are you sure you want to delete this customer?'     };      modalService.showModal({}, modalOptions)         .then(function (result) {              //your-custom-logic         }); } 

Answer 2

You can see my example. whatever i'v done.

  <div ng-app="myApp" ng-controller="firstCtrl">     <button ng-click="delete(1);">Delete </button>   </div> 

script

 var app = angular.module("myApp", []);  app.controller('firstCtrl', ['$scope','$window', function($scope,$window) {   $scope.delete = function(id) {     deleteUser = $window.confirm('Are you sure you want to delete the Ad?');     if(deleteUser){      //Your action will goes here      alert('Yes i want to delete');     }   };  }])