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.

Alejandro Teixeira Muñoz · Accepted Answer · 2015-06-10 21:15:30Z

0

That´s the way I coded It

components/modal.jade

.modal-header
  button.close(ng-if='modal.dismissable', type='button', ng-click='$dismiss()') &times;
  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.

answered Jun 10, 2015 at 21:15

Alejandro Teixeira Muñoz

2,7881 gold badge24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

julian Over a year ago

I have it now similar. But I'm not using Jade. My Current problem is now that the templateUrl cannot be found. I defined it like: templateUrl:'components/ItemList/templates/confirmDelete.html', inside the $modal.open(). But when the Modal should open i only get a console error: Error: [$compile:tpload] Failed to load template: components/ItemList/templates/confirmDelete.html (HTTP status: 500 Internal Server Error) The given path has to be relative to what?

Alejandro Teixeira Muñoz Over a year ago

chck this! stackoverflow.com/questions/17011616/…

julian Over a year ago

hey, thanks for the quick answer. I tried it with $location.path() but i still get a console error saying TypeError: Cannot read property 'path' of undefined at Scope.$scope.confirmDelete. Although i passed the $location to the controller where my confirmDelete method is defined at.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related