ilter ilter - 1 year ago 158
AngularJS Question

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

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 Source

so create a reusable service for that.. read here

code here:

angular.module('yourModuleName').service('modalService', ['$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, customModalOptions);
    }; = 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) {
                $scope.modalOptions.close = function (result) {

        return $;


html for display

<div class="modal-header">
<div class="modal-body">
<div class="modal-footer">
  <button type="button" class="btn" 
  <button class="btn btn-primary" 

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) {
        dataService.deleteCustomer($ () {
        }, processError);