CODEWITHSUNDEEP
javascriptangularjstwitter-bootstraptwitter-bootstrap-3
Ankur Verma
Ankur Verma

Reputation: 5933

Showing the bootbox with the angular js data binded form

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.

Upvotes: 0

Views: 6037

Answers (4)

ls5302
ls5302

Reputation: 1

I appreciate this is an old question, but in addition to the top-rated answer, which I am unable to comment on currently, one needs to consider the life-cycle of the dialog box.

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

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

I discovered the issue with AngularJS v1.8.2 and the select directive; when the options were statically define it was observed that the value in the model would be set to null shortly after the the dialog was dismissed. The behaviour was corrected by using the childScope as above.

If the options are static e.g. <option value="abc">abc</option> when the dialog box is dismissed, the options are removed from the DOM. The AngularJS code is informed of the removal and eventually sets the value in the model to null.

This does not appear to happen when the options are generated using the ng-options attribute, presumable because angular is in charge of disposal of the options.

By destroying the childScope just before the dialog is removed from the DOM, the removal of the options from the DOM does not affect the value in the $scope.

Hopefully this will help other people maintaining legacy code.

Upvotes: 0

Xsmael
Xsmael

Reputation: 3942

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

very nice!

Upvotes: 1

Штефам Клюйшнер
Штефам Клюйшнер

Reputation: 101

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 () {
                        }
                    }
                }
            });

Upvotes: 10

Maxim Shoustin
Maxim Shoustin

Reputation: 77910

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

Upvotes: 1

Related Questions