How to create a confirmation Dialog with Angular JS and UI Bootstrap

Question

i'm trying to get a confirmation modal dialogue to work. I Have a button with an ng-click directive that calls confirmDelete()

html

<input type="button" ng-click="confirmDelete(idToDelete)" class="btn">Delete</input>

ControllerLogic:

$scope.confirmDelete = function (idToDelete) {
// create a modal dialog with $modal.open from Bootstrap UI

// if answer in modal dialgue was "yes" call
// deleteItem(idToDelete);
// else close modal and do nothing
}

$scope.deleteItem = function (idToDelete) {
//execute deletion
}

I'm not able to achieve what i tried to describe in the pseudo-code above. Maybe someone can give me a hint.

Answer 1

That´s the way I coded It

components/modal.jade

.modal-header
  button.close(ng-if='modal.dismissable', type='button', ng-click='$dismiss()') ×
  h4.modal-title(ng-if='modal.title', ng-bind='modal.title')
.modal-body
  p(ng-if='modal.text', ng-bind='modal.text')
  div(ng-if='modal.html', ng-bind-html='modal.html')
.modal-footer
  button.btn(ng-repeat='button in modal.buttons', ng-class='button.classes', ng-click='button.click($event)', ng-bind='button.text')

components/modal.service.js

'use strict';

angular.module('myApp')
  .factory('Modal', function ($rootScope, $modal) {
    /**
     * Opens a modal
     * @param  {Object} scope      - an object to be merged with modal's scope
     * @param  {String} modalClass - (optional) class(es) to be applied to the modal
     * @return {Object}            - the instance $modal.open() returns
     */
    function openModal(scope, modalClass) {
      var modalScope = $rootScope.$new();
      scope = scope || {};
      modalClass = modalClass || 'modal-default';

      angular.extend(modalScope, scope);

      return $modal.open({
        templateUrl: 'components/modal/modal.html',
        windowClass: modalClass,
        scope: modalScope
      });
    }

    // Public API here
    return {

      /* Confirmation modals */
      confirm: {

        /**
         * Create a function to open a delete confirmation modal (ex. ng-click='myModalFn(name, arg1, arg2...)')
         * @param  {Function} del - callback, ran when delete is confirmed
         * @return {Function}     - the function to open the modal (ex. myModalFn)
         */
        remove: function(del) {
          // console.log('MODAL');
          del = del || angular.noop;

          /**
           * Open a delete confirmation modal
           * @param  {String} name   - name or info to show on modal
           * @param  {All}           - any additional args are passed staight to del callback
           */
          return function() {
            var args = Array.prototype.slice.call(arguments),
                name = args.shift(),
                deleteModal;

            deleteModal = openModal({
              modal: {
                dismissable: true,
                title: 'Confirm Delete',
                html: '<p>'+ $rootScope.translation.modalDelete + ' <strong>' + name + '</strong>?</p>',
                buttons: [{
                  classes: 'btn-danger',
                  text: 'Delete',
                  click: function(e) {
                    deleteModal.close(e);
                  }
                }, {
                  classes: 'btn-default',
                  text: 'Cancel',
                  click: function(e) {
                    deleteModal.dismiss(e);
                  }
                }]
              }
            }, 'modal-danger');

            deleteModal.result.then(function(event) {
              del.apply(event, args);
            });
          };
        }
      }
    };
  });

components/modal.css

.modal-primary .modal-header,
.modal-info .modal-header,
.modal-success .modal-header,
.modal-warning .modal-header,
.modal-danger .modal-header {
  color: #fff;
  border-radius: 5px 5px 0 0;
}
.modal-primary .modal-header {
  background: #428bca;
}
.modal-info .modal-header {
  background: #5bc0de;
}
.modal-success .modal-header {
  background: #5cb85c;
}
.modal-warning .modal-header {
  background: #f0ad4e;
}
.modal-danger .modal-header {
  background: #d9534f;
}

Controller.js

angular.module('myApp')
  .controller('Ctrl', function ($rootScope, Modal) 
  {
    $scope.confirmDelete = Modal.confirm.remove(function(obj){
      yourService.remove(obj);
   });
  });

HTML

<input type="button" ng-click="confirmDelete(idToDelete)" class="btn">Delete</input>

Hope it will help to you.