eriktufvesson/ngbootbox

AngularJS wrapper for Bootbox.js

ngbootbox's Issues

Customize buttons on prompt

How can I customize the buttons on a prompt. My button mark-up:

<button class="btn btn-default" 
        ng-bootbox-prompt="Report Listing"
	ng-bootbox-prompt-action="reportListing(result,<?= $listing->id; ?>)" 
	ng-bootbox-prompt-action-cancel="promptCallbackCancelled(result)"
	ng-bootbox-buttons="customDialogButtons">Prompt
</button>

It seems that the 'customDialogButtons' is ignored. I have everything wokring perfectly, the prompt action is called and I handle the response but I just need my buttons to be styled correctly.

Thnaks.

Publish into NPM

Hey man, thanks for this, but your module is only available on Bower I think.

It would be cool to be available on npm as well, since lots of users are using browserify and there is no need for Bower usage in this case. Thanks.

Can't access controllers scope from template that is loaded by ngBootBox

I can't resolve issue. Tried to use service and directive with custom dialog.
Problem is that i cant acces Controller's $scope form template.

At example, if i will create $scope.model { param: 'value' } and will try to access it from ngbootbox loaded template, it will be null. I also tried to add $parent.model.param but stil cant access. Also I can't validate form in template. Everything works only if I specify in controller $rootScope everywhere instead of $scope.

My sample Code:

Controller:

angular.module('app.transfers')
    .controller('MyController', function ($scope, $rootScope, $ngBootbox) {

        $scope.model = {
            param: 'some value'
        };

        $scope.transferDialogButtons = {
             success: {
                 label: 'Cancel',
                 className: 'btn-default',
                 callback: function(result) {
                    return true;
                 }
             },
             main: {
                label: 'Confirm',
                className: 'btn-danger',
                callback: function() {
                    return $scope.executeAction();
                }
            }
        };

        $scope.executeAction = function () {
            $rootScope.$broadcast('show-errors-check-validity'); // form validation works only if $rootScope is specified
        };
    });

Html

<button class="btn btn-primary"
        ng-bootbox-title="Title"
        ng-bootbox-custom-dialog
        ng-bootbox-custom-dialog-template="views/transfers/_partials/dialog.html"
        ng-bootbox-buttons="transferDialogButtons">
    <i class="fa fa-exchange"></i> Button Title
</button>

Template

<form class="form-horizontal" name="sampleForm" role="form" novalidate>

    <div class="form-group" show-errors>
        <label for="param" class="col-sm-4 control-label">Param:</label>
        <div class="col-sm-8">
            <input ng-model="model.param" name="param" type="text" class="form-control" required>
            <p class="help-block" ng-show="sampleForm.destination.$error.required">Error Message 1</p>
        </div>
    </div>
</form>

(ngBootbox + bootbox) + RequireJS + AngularJS = "ReferenceError: bootbox is not defined"

ngBootbox seems a really useful package when using bootbox with AngularJS. Therefore I really wish I'd be able to use this.

I use RequireJS to load packages for my application. I have configured my requirejs.conf.js like below:

require.config({
    paths: {
        'angular': '../vendor/angular/angular.min',
        'jquery': '../vendor/jquery/dist/jquery.min',
        'twbs': '../vendor/bootstrap/dist/js/bootstrap.min',
        'bootbox': '../vendor/bootbox/bootbox',
        'ngBootbox': '../vendor/ngBootbox/dist/ngBootbox'
    },
    shim: {
        'app' : {
            'angular',
            'jquery',
            'twbs',
            'bootbox',
            'ngBootbox'
        },
        'angular': {
            deps: [
                'jquery',
            ]
        },
        'twbs': {
            deps: [
                'jquery'
                ]
        },
        'ngBootbox': {
            deps: [
                'jquery',
                'angular',
                'twbs',
                'bootbox'
                ]
        },
        'bootbox': {
            deps: [
                'angular'
            ],
            exports: 'bootbox'
        }
    }
});

When I monitor network activities, I can see all the required JS files in your documentation (jQuery, AngularJS, Bootstrap, Bootbox, ngBootbox) loading.

I have a button like following in the view:

<button
    class="btn btn-danger btn-xs"
    ng-bootbox-confirm="Are you sure you want to confirm this?"
    ng-bootbox-confirm-action="console.log(1])"
    ng-bootbox-confirm-action-cancel="console.log(2)"
>
    Delete
</button>

When I click it, I get the following error.

ReferenceError: bootbox is not defined

Have you checked your package with RequireJS? Am I doing something wrong?

What it looks like, is that bootbox is not being exposed to your package, even though it is specified as one of dependencies of your package.

I'd highly appreciate a fix for this.

ReferenceError: $http is not defined

Hi, I have problem with custom dialog over ngBootbox service. Have anybody this problem?

ReferenceError: $http is not defined
    at getTemplate (ngBootbox.js:180)
    at Object.customDialog (ngBootbox.js:154)
    ...

Promise API catch(errorCallback) doesn't support IE8

IE8 doesn't support catch, so compilation occurs when using getTemplate(...).

Please change like this:

customDialog: function(options) {
  if(options.templateUrl) {
    getTemplate(options.templateUrl)
    .then(function(template) {
      ...
    }, function() {
      $window.bootbox.dialog(options);
    });
  }
  else {
    $window.bootbox.dialog(options);
  }
},

ng-click problem

This button is in a modal dialog

versionApp.controller('outsideUrlSwitchController', [ '$scope', 'outsideUrlSwitchService', function($scope, outsideUrlSwitchService) {

$scope.deleteOutsideUrlSwitch = function(outsideUrlSwitchId) {

    outsideUrlSwitchService.deleteOutsideUrlSwitch(outsideUrlSwitchId);
    outsideUrlSwitchService.queryOutsideUrlSwitchList($scope);
};
} ]);

Bootbox custom dialog support?

Hi.. Does this support custom dialog?

Something similar like :

bootbox.dialog({
  message: "I am a custom dialog",
  title: "Custom title",
  buttons: {
    success: {
      label: "Success!",
      className: "btn-success",
      callback: function() {
        Example.show("great success");
      }
    },
    danger: {
      label: "Danger!",
      className: "btn-danger",
      callback: function() {
        Example.show("uh oh, look out!");
      }
    },
    main: {
      label: "Click ME!",
      className: "btn-primary",
      callback: function() {
        Example.show("Primary button");
      }
    }
  }
});

confirm or dismiss the dialog via angularJS

How can I confirm or dismiss the dialog using custom buttons i have on agularJS template ?

maybe through ng-click or any other way ?

Prevent from close on success button click.

When user click on modal success button , pop up should not close. How i do that?

How to disable dialog button during callback?

Here's my config.

vm.add_inspiration_image_opts = {
            className: "inspiration-image-modal",
            scope: $scope,
            backdrop: 'static',
            animate: false,
            title: 'Add Inspiration Image',
            size: 'large',
            templateUrl: '/app/assets/templates/admin/add_inspiration_image_modal.tpl.html',            
            buttons: {
                add: {
                    label: '<i class="fa fa-floppy-o"></i>&nbsp;&nbsp;Save Image',
                    className: 'btn-primary btn-save',
                    callback: function () {                     
                        // vm.add_inspiration_image_opts.buttons.add.disabled = "true";
                        angular.element('.inspiration-image-modal .submit-button').trigger('click');

                        return false;
                    }
                }
            },
            onEscape: function () {
                resetForm();

                return true;
            }
        };

Cannot use inline conditionals in templates using ng-if attribute

This plugin completely ignores ng-if attribute

change locale globally, with angular.config

Hi,

I'm trying to do something like this,

app.config(['ngBootbox', function(ngBootbox) {
   ngBootbox.setLocale ('xxx');
}]);

But angular does not run with it, any ideas? Already added ngBootbox as dependencies, and it works great.

Now I just need to avoid setting the locale in every controllers ...

multiple custom modals on same view (same controller)

 <button class="btn btn-primary" ng-click="view(t)"
                    ng-bootbox-title="<i class='fa fa-eye-opened'></i>Details Ticket"
                    ng-bootbox-custom-dialog
                    ng-bootbox-custom-dialog-template="./templates/modal/view-ticket.html"
                    ng-bootbox-buttons="customDialogButtons"
                    ng-bootbox-options="dialogOptions">
                    <span class="glyphicon glyphicon-eye-opened" aria-hidden="true"></span>
                        View
                </button>
                
<button class="btn btn-primary" ng-click="edit(t)"
                    ng-bootbox-title="<i class='fa fa-tags'></i>Edition Ticket"
                    ng-bootbox-custom-dialog
                    ng-bootbox-custom-dialog-template="./templates/modal/add-ticket.html"
                    ng-bootbox-buttons="customDialogButtons"
                    ng-bootbox-options="dialogOptions">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                        Add 
                </button>

I have these two buttons, but it seems like the first one's template url gets overridden byu the second one; as a result both the modals opens the same template, that is ./templates/modal/add-ticket.html
when i remove the second button, then the first works as expected.

This is not limited to two modals, id i try adding a lot more they will all resolve to the template url of the last one, and all of them will be displaying the same content when opened.

Please help.

Values does not update the HTML

Hi,

The bootbox works but my view is not updated automatically. I have to use $scope.$apply within the callback to update the frontend. Here is the code. Am I missing something?

$ngBootbox.customDialog({ message: "Will remove all existing items", title: "Are you sure?", buttons: { warning: { label: "No", className: "btn-warning", callback: function() { console.log("No clicked"); }` }, success: { label: "Yes", className: "btn-success", callback: function() { console.log("Yes clicked"); _this.supplyItems = []; } } } });

Update the package on npm

ngBootbox published to npm is v0.1.2, but with the update which replaces ".success" in favour of ".then" due to the change in $http is published under 0.1.4.

is a submit button possible?

hey,
I'm using custom dialog with HTML template, and i have a form in it.
upon clicking on one of the custom buttons - is there a way to make the form "submitted"? so i can use the angular methods related to submission? something generic?

thanks.

ngBootboxCustomDialog directive not setting message in options when template url is used

The ngBootboxCustomDialog directive is not setting the message on scope.options when the template URL attribute is used. An error message of "Uncaught Error: Please specify a message" is shown. It would also be convenient if the directive looked at the custom options for the options.templateUrl like the service does.

<button class="btn btn-default"
        ng-bootbox-custom-dialog
        ng-bootbox-data="customBootboxData"
        ng-bootbox-custom-dialog-template="test.html"
        ng-bootbox-options="customDialogOptions">
    Test
</button>

Also, I'm losing scope to the bootbox-data. It seems like the message will need to be compiled each time the dialog is rendered. Something like this (when taking the options approach):

element.bind('click', function () {
  if (scope.options) {
    scope.options.message = $compile(msg)(scope);
    bootbox.dialog(scope.options);
  }
  else {
    bootbox.dialog({
      message: msg,
      title: scope.title,
      buttons: scope.buttons,
      className: scope.className
    });
  }
});

options.scope documentation

Refer to #22 (comment). There is no documentation to scope option from #16

[PATCH] Make customDialog method return an promise to the bootbox dialog instance

I changed the customDialog method to return a promise that resolves to the bootbox dialog instance.

This is very useful, for example, to plug an shown.bs.modal event and perform a custom focus.

The ngBootbox.js change (added a promise as return):

customDialog: function (options) {
var deferred = $q.defer();

if (options.templateUrl) {
  getTemplate(options.templateUrl)
    .then(function (template) {
      options.scope = options.scope || $rootScope;
      options.message = $compile(template)(options.scope);
      deferred.resolve($window.bootbox.dialog(options));
    }, function () { //Show default dialog if no template could be found
        deferred.resolve($window.bootbox.dialog(options));
    });
}
else {
    deferred.resolve($window.bootbox.dialog(options));
}

return deferred.promise;
},

This is an example, a dialog with an input and a table as the dialog body:

<script type="text/ng-template" id="my-template.html">
    <input placeholder="Enter your search" />
    <table>
         <tr ng-repeat=".....">
         </tr>
    </table>
</script> 

<script type="text/javascript">
    $ngBootbox.customDialog({
        title: 'Search dialog',
        template: 'my-template.html'
        buttons: {
            'ok': { label: 'OK', className: 'btn-primary' },
            'cancel': { label: 'Cancel', className: 'btn-default' }
        }
    }).then(function(dialog) {
        // on dialog SHOW...
        dialog.one("shown.bs.modal", function() {
          // ... focus on the first INPUT tag
          dialog.find("input:first").focus();
        });
    });
</script>

confirm has no title,can u add one ?

can you add a title to confirm ?it's too simple when no title for a confirm !

bootbox is undefined in $window

I am trying to use ngBootbox with a meanjs project. I have added ngBootbox as a dependency to my app. When I try to call any of the bootbox functions I get an error that bootbox is undefined. I set a breakpoint on the alert function and confirmed that $window.bootbox is undefined.

Did I miss a step in adding ngBootbox to my project or is this a bug?

Destroying bootbox

Is there any way to destroy bootbox.
beacuse hideAll() function just hides the bootbox it doesnt destroy it.

Bind events via customDialog

This can be very usefull, a property to bind bootstrap modal events like this:

$ngBootbox.customDialog({
  // currently props like: title, message, buttons.....

  events: {
    'shown.bs.modal': function() {
      // this is showed on each modal show
      alert('My modal is showing!');
    }
  }

ngBootbox 0.1.1 looks for bootbox >4.4.0 which does not exist.

When installing ngBootbox version 0.1.1 through bower, it will attempt to install bootbox >4.4.0 as stated in bower.json which does not exist.

How to set custom dialog's size?

How to set custom dialog's size?

ng-bootbox-size="large"

This is not working.

Need to use $ngBootbox in angular.config

Hi I'm using ngBootbox in my application I have one query I want to use $ngBootbox.alert(msg) in angular.config. I'm getting error circular dependancy so could you please help me I have injected $ngBootbox in angular.config.
angular.config(function($stateProvider,$logProvider,$provide,$httpProvider) { $provide.decorator("$exceptionHandler",function ($delegate) { return function (exception, cause) { exception.message = "Some error has occured. Please try again, if error persist then please contact help desk: [" + exception.message + "]"; $delegate(exception, cause); $ngBootbox.alert(exception.message); }; }); })

Version for Angular2

Hi! Do you have plans to make a version for Angular 2 for this nice plugin?

Partial not showing

Hi,

I think there is bug/issue with the partials - please see this plunkr

https://plnkr.co/edit/pvbKoKX7r3eo7hdHqFlw?p=preview

Thanks,

Bob

support for className?

I didn't find anything to get this option value to working? Basically usage is like

bootbox.dialog({
    message: "test",
    className: "foobar"
})

And that will add foobar class to main modal div. This is very usefull when you need to override some basic styling of modal itself.

ng-bootbox-prompt attribute for default value?

In the examples you can find ng-bootbox-prompt-action and ng-bootbox-prompt-action-cancel, but not ng-bootbox-prompt-default-value (took me a while guessing some possibilities, didn't need to ask in the end).

Please include it in the examples page.

How to close custome dialog programatically ?

Can we close the custome dialog programatically ?

dialog controller not working

Dialog controller not working

$scope not working

Thanks for your hard work and this is saving a lot of my time. However, I've a very small issue for now, which I belive can be fixed easily.

What I'm trying to do is adding and updating an object using bootbox modal. I'm using .dialog() with custom template, which contains some form input elements. I tried to work with $rootScope. When doing insert, updates to input fields are updating the $rootScope.myObject well and there is no problem. But when doing an update, I sould populate the form with current values and thus I'm updating the $rootScope.myObject. I'm doing this with ng-click, because I don't see other way of doing it, becuase before opening the bootbox modal, I should first get the object from database, by id, then update $rootScope. This is not working. In update mode, the fields are not populating with values. Belov is my code sample.

BootBox Options

$scope.modalOptions = {
    closeButton: false,
    buttons: {
        warning: {
            label: "Cancel",
            className: "btn-default"
        },
        success: {
            label: "Save",
            className: "btn-danger",
            callback: function () {
                //add or update
            }
        }
    }
}

BootBox

<a title="Edit" href="" 
    ng-click="update(id)"                                                         
    ng-bootbox-custom-dialog
    ng-bootbox-custom-dialog-template="/template.html"
    ng-bootbox-options="modalOptions">Update This</a>

Template.html

<form ng-controller="myController">
    <input type="text" ng-model="myObject.Name" />
    <input type="text" ng-model="myObject.Quantity" />
</form>

$scope.update(id)

$scope.update= function (id) {
    var objFromDatabase = //getting object from db by id
    $rootScope.myObject = objFromDatabase;
};

$rootScope.myObject

$rootScope.myObject = {
    Name: '',
    Quantity: ''
}

When I click "Update This" link, the modal is showing up with custom html/form, but textboxes are empty. Values are not there. Please help.

How to do a modal by ajax

Hi,

How to set ng-bootbox-custom-dialog with a html template like ng-include, i don't want to use $http to upload the html from the controller, which is no other way to do? would be good if that is a future feature.

Thanks.

Attach event when modal opens

How I attach an event when modal oppens? I tried this:

$scope.artwUpload = $ngBootbox.customDialog({
            title: '',
            templateUrl: '/view/modal_upload_arquivo.html?v=1.0',
            scope: $scope,
            buttons: {
                cancel: {
                    label: '<span><i class="icon icon-ban-circle"></i>Cancelar</span>',
                    className: 'custom-ng-btn-confirm-cancel'
                },
                submit: {
                    label: '<span><i class="icon icon-check"></i>Concluir</span>',
                    className: 'custom-ng-btn-confirm-save',
                    callback: function () {
                        $scope.salvar_arquivos();
                        return false; // prevent close;
                    }
                }
            },
        });

        $ngBootbox.customDialog.init(function() {
            alert('Teste');
        });

Prompt input type

First, thank you for this wonderful solution. I, however, have a challenge in setting the input type of my choice in the prompt dialog. How can I achieve this without modifying the bootbox.min.js file

How to add title for alert / confirm?

I tried that like this

<button type="button" class="btn btn-danger pull-right"
    data-ng-bootbox-title="Danger - Danger - Danger"
    data-ng-bootbox-confirm="Are you sure about the asdf book delete?"
    data-ng-bootbox-confirm-action="deleteBook()"
>
    Delete
</button>

But title is not set.

Support for different prompts?

There is multiple prompt types in bootbox, it would be nice to support all of those.

Enhancement to allow message to use scope

Rather than having a static ng-bootbox-confirm message, it would be nice if one could either: a) Integrate in a current scope variable directly, or b) call a scope function to get the message.

For example, imagine a button:
<button ng-bootbox-confirm="Delete the user?"></button>

Instead it would be nice to integrate in something like:
<button ng-bootbox-confirm="Delete {customer.name}?"></button>
-or-
<button ng-bootbox-confirm="deleteMessage(customer)"></button>
...
$scope.deleteMessage = function(customer) {
return 'Delete ' + customer.name + '?';
};

Optional attribute to center vertically the modal

Was wandering if something like this https://www.abeautifulsite.net/vertically-centering-bootstrap-modals/ could be activated within the directive with an atribute or config. Even in bootbox (not the angular one) to center vertically is rather difficult to achieve (see bootboxjs/bootbox#166), but with angular it gets more annoying.

Since directives are powerfull, I suggest to include this feature in the module.

Custom dialog as service

By $ngBootbox service, just alert, confirm and prompt are available, it would be very nice if the custom dialog was available as well...

No directive to close popup on pressing Escape key

If I'm not wrong there is no such directive to close pop up on pressing Escape button.
In these examples there are some popups which has ability to be closed by pressing Escape key wheres some hasn't:
http://eriktufvesson.github.io/ngbootbox/

It would be good if there is something like ng-bootbox-on-escape with true or false value for such thing.

Issue with updating $scope using callback function

Hello,

I want to update a $scope variable in a bootbox callback function. Like:

HTML:

< h1>{{msg}}< /h1>

JS:

$scope.msg = "old message";
$scope.customizeTableBootboxOption = {
scope: $scope,
buttons: {
success: {
label: 'Save',
className: 'btn-success',
callback: function () {
$scope.msg = "new message";
});
}
}
};

When I submit that "Save" button from pop up, that message still remains "old message" instead of "new message", but when I open that bootbox pop up again, that message automatically updates to "new message". I have already tried with and without option "scope: $scope", but nothing changes.

Thanks in advance.

controller for custom dialog

Hi

Pls, add to "customDialog" function controller option:

options.controller = $controller(options.controller,{$scope: options.scope}) || undefined;
options.message = $compile(template)(options.scope,undefined, {transcludeControllers: options.controller});