Skip to content

Instantly share code, notes, and snippets.

@joshorvis

joshorvis/angular.modal.js

Forked from g-alonso/angular.modal.js
Last active August 29, 2015 14:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joshorvis/a4bc6d417b2173a752d6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joshorvis/a4bc6d417b2173a752d6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @g-alonso g-alonso revised this gist Feb 24, 2014. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions angular.modal.js
    View file
    Original file line number Diff line number Diff line change
    @@ -10,10 +10,11 @@
    *
    * //1) Confirmation Modal
    * ConfirmationModal.open('Confirm deletion', 'Are you sure?', function(){
    * //Do delete
    * //Do delete...
    *
    * //Close modal
    * ConfirmationModal.close()
    * },
    * //Close modal
    * ConfirmationModal.close
    * );
    *
    * //2) Information Modal
  2. @g-alonso g-alonso revised this gist Feb 24, 2014. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions angular.modal.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,8 @@
    *
    * @author Gabriel Alonso <[email protected]>
    *
    * Angular Modal Service
    *
    * Requiere Bootstrap's modal (http://getbootstrap.com/javascript/#modals)
    *
    * Example:
  3. @g-alonso g-alonso revised this gist Feb 24, 2014. 1 changed file with 22 additions and 13 deletions.
    35 changes: 22 additions & 13 deletions angular.modal.js
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,7 @@
    *
    */
    var modal = angular.module('Modal',[]);

    modal.service('DialogService', function($compile, $http, $rootScope, $templateCache, $cacheFactory) {
    this.open = function(options) {
    $templateCache.put('standardModal.html',
    @@ -33,26 +33,26 @@ modal.service('DialogService', function($compile, $http, $rootScope, $templateCa
    '<div class="modal-body">'+
    '{{content}}'+
    '</div>'+
    '<div class="modal-footer">'+
    '<button ng-repeat="(name, callback) in customButtons" type="button" ng-click="callback()">{{name}}</button>'+
    '<div class="modal-footer">'+
    '<button ng-repeat="options in customButtons" type="button" class="{{options.styleClasses}}" ng-click="options.callback()">{{options.name}}</button>'+
    '<button ng-show="showButtonClose" type="button" data-dismiss="modal">Close</button>'+
    '</div>'+
    '</div><!-- /.modal-content -->'+
    '</div><!-- /.modal-dialog -->'+
    '</div><!-- /.modal -->');

    template = $templateCache.get('standardModal.html');

    var template = $templateCache.get('standardModal.html');
    var childScope = $rootScope.$new();

    childScope.title = options.title;
    childScope.content = options.content;
    childScope.customButtons = options.customButtons;
    childScope.showButtonClose = options.showButtonClose;

    $('body').append($compile(template)(childScope));
    $('#dialogModal').modal();

    $('#dialogModal').on('hidden.bs.modal', function (e) {
    childScope.$destroy();
    $('#dialogModal').remove();
    @@ -62,16 +62,24 @@ modal.service('DialogService', function($compile, $http, $rootScope, $templateCa
    $('#dialogModal').modal('hide')
    }
    });

    /* Useful Modals*/
    modal.service('ConfirmationModal', function(DialogService) {
    this.open = function(title, content, acceptCallback, declineCallback) {
    DialogService.open({
    title: title,
    content: content,
    customButtons: {
    Yes: acceptCallback,
    No: declineCallback
    Yes: {
    name: "Yes",
    callback: acceptCallback,
    styleClasses: 'btn btn-success'
    },
    No: {
    name: "No",
    callback: declineCallback,
    styleClasses: 'btn btn-danger'
    }
    },
    showButtonClose: false
    });
    @@ -80,6 +88,7 @@ modal.service('ConfirmationModal', function(DialogService) {
    DialogService.close();
    }
    });

    modal.service('InformationModal', function(DialogService) {
    this.open = function(title, content) {
    DialogService.open({
    @@ -89,5 +98,5 @@ modal.service('InformationModal', function(DialogService) {
    });
    }
    });

    //Add more here...
  4. @g-alonso g-alonso created this gist Jan 6, 2014.
    93 changes: 93 additions & 0 deletions angular.modal.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,93 @@
    /**
    *
    * @author Gabriel Alonso <[email protected]>
    *
    * Requiere Bootstrap's modal (http://getbootstrap.com/javascript/#modals)
    *
    * Example:
    *
    * //1) Confirmation Modal
    * ConfirmationModal.open('Confirm deletion', 'Are you sure?', function(){
    * //Do delete
    * },
    * //Close modal
    * ConfirmationModal.close
    * );
    *
    * //2) Information Modal
    * InformationModal.open('Title', 'Message');
    *
    */
    var modal = angular.module('Modal',[]);

    modal.service('DialogService', function($compile, $http, $rootScope, $templateCache, $cacheFactory) {
    this.open = function(options) {
    $templateCache.put('standardModal.html',
    '<div class="modal fade" id="dialogModal" tabindex="-1" role="dialog" aria-labelledby="dialogModalLabel" aria-hidden="true">'+
    '<div class="modal-dialog">'+
    '<div class="modal-content">'+
    '<div class="modal-header">'+
    '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>'+
    '<h4 class="modal-title" id="dialogModalLabel">{{title}}</h4>'+
    '</div>'+
    '<div class="modal-body">'+
    '{{content}}'+
    '</div>'+
    '<div class="modal-footer">'+
    '<button ng-repeat="(name, callback) in customButtons" type="button" ng-click="callback()">{{name}}</button>'+
    '<button ng-show="showButtonClose" type="button" data-dismiss="modal">Close</button>'+
    '</div>'+
    '</div><!-- /.modal-content -->'+
    '</div><!-- /.modal-dialog -->'+
    '</div><!-- /.modal -->');

    template = $templateCache.get('standardModal.html');

    var childScope = $rootScope.$new();

    childScope.title = options.title;
    childScope.content = options.content;
    childScope.customButtons = options.customButtons;
    childScope.showButtonClose = options.showButtonClose;

    $('body').append($compile(template)(childScope));
    $('#dialogModal').modal();

    $('#dialogModal').on('hidden.bs.modal', function (e) {
    childScope.$destroy();
    $('#dialogModal').remove();
    })
    };
    this.close = function() {
    $('#dialogModal').modal('hide')
    }
    });

    /* Useful Modals*/
    modal.service('ConfirmationModal', function(DialogService) {
    this.open = function(title, content, acceptCallback, declineCallback) {
    DialogService.open({
    title: title,
    content: content,
    customButtons: {
    Yes: acceptCallback,
    No: declineCallback
    },
    showButtonClose: false
    });
    };
    this.close = function(){
    DialogService.close();
    }
    });
    modal.service('InformationModal', function(DialogService) {
    this.open = function(title, content) {
    DialogService.open({
    title: title,
    content: content,
    showButtonClose: true
    });
    }
    });

    //Add more here...