Showing the bootbox with the angular js data binded form

Question

I started using Angular JS just 2 weeks back and is very much amazed with the data binding feature of it.

Also I am very fond of using bootboxjs to show the messages and all the info to the user.

I am just thinking can we show the data binded form of Angular JS in bootbox through custom dialog.

I tried but I am not getting the content infact the dialog box is showing the the template as it is and not with the data.

How can we show the data in bootbox UI with the data already binded with it.

Answer 1

You must use the $compile.

http://code.angularjs.org/1.2.13/docs/guide/compiler

As example:

            var tplCrop = '<div><img ng-src="{{file.src}}"/></div>';
            var template = angular.element(tplCrop);
            var linkFn = $compile(template);
            var html= linkFn($scope);

            bootbox.dialog({
                message: html,
                title: "My title",
                buttons: {
                    ok: {
                        label: "Ok",
                        className: "btn-success",
                        callback: function () {
                        }
                    },
                    close: {
                        label: "Close",
                        className: "btn-danger",
                        callback: function () {
                        }
                    }
                }
            });

Answer 2

I suggest you this pretty good example Plunker how to pass data to Dialog.

However its not bootbox (that uses jQuery). The demo shows dialog based only on bootstrap and angualrJS.

Hope it will help

Answer 3

Now there is a very nice module, to handle that with separate template file! https://github.com/eriktufvesson/ngbootbox

very nice!