Bootstrap-angular-ui modal on load

Question

I am using bootstrap-angular-ui-modal for a site I am working on. The code I am using to open the modal

$modal.open(
    {
        templateUrl: '/home/template',
        controller: myCtrl,
        resolve: {
            data: function () {
                return data;
            }
        }
    });

Everything is working fine. But I need to find a way to execute some code after modal is loaded. I tried different things but can't make them work. Some of things I tried

In template I did

<script>
    document.onload = function () {
        console.log('opened');
    };
</script>

I also found there is a promise for the angular modal object named openned. I tried to

modalInstance.opened.then(function(){console.log('hello')});

not working either. I can use some help here.

Hossain Muctadir · Accepted Answer · 2015-02-04 20:38:37Z

6

This is definitely not a good solution, but at least worked for me. I just added a timeout before executing the desired function,

modalInstance.opened.then(
    $timeout(function() {
            console.log('hello');
        }, delay));

answered Feb 4, 2015 at 20:38

Hossain Muctadir

3,6361 gold badge22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2241980 · Accepted Answer · 2013-10-29 11:48:43Z

5

UI-bootstraps modal has a result resolve.

"opened" - a promise that is resolved when a modal gets opened after downloading content's template and resolving all variables

or

Use ng-init. Create a div inside your template file:

<div ng-init="func()"></div>

answered Oct 29, 2013 at 11:48

user2241980

2 Comments

Hossain Muctadir Over a year ago

tried opened promise. gets called before modal is loaded. that is why jquery binding codes not working. and about ng-init -

The only appropriate use of ngInit for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

amdev Over a year ago

And how to tell to the controller to init on create ? it's the question here. Why ng-init="mycontroller.init()" is evil ?

user247702 · Accepted Answer · 2016-04-18 13:10:47Z

3

Since version 0.13.0, there's a rendered promise you can use.

rendered (Type: promise) - Is resolved when a modal is rendered.

Example:

this.modalInstance.rendered.then(function () {
    console.log("modal is rendered");
});

answered Apr 18, 2016 at 13:10

user247702

24.4k18 gold badges116 silver badges162 bronze badges

Comments

jdmcnair · Accepted Answer · 2014-02-24 21:37:46Z

1

If you're wanting to do something after the DOM is loaded, it's best to do that sort of thing inside a directive. See here: http://docs.angularjs.org/guide/directive#creating-a-directive-that-manipulates-the-dom

You could mark your modal body (or something inside the modal) with your directive attribute, then create the directive like so:

App.directive('myDirective', function($timeout) {
        function link(scope, element, attrs) {
            $timeout(function () {
                // stuff to do after DOM load here
            });
        }

        return {
             link: link
        };
    });

answered Feb 24, 2014 at 21:37

jdmcnair

1,32515 silver badges33 bronze badges

Collectives™ on Stack Overflow

Bootstrap-angular-ui modal on load

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related