AngularJs: Automatically open modal on page load

Question

In my application I have 2 pages. I have a button on my first page which when clicked routes to my second page:

  <a href="#/second-page" class="btn btn-default" >

On my second page I want to show my modal popup as soon as we load the second page. For this I am using the following code in my second controller to show the popup.

    var modalInstance = $modal.open({
            templateUrl: myUrl + 'app/page/modal.html',
            controller: 'secondPageCtrl',
            backdrop: 'static',
            keyboard: false
        });

When someone press cancel on the modal, I want to close the modal and then go back to my first page:

     $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
        $state.go('first-page');
    };

All this works fine. The issue is now after the above redirect when I press the button on my first page again, the modal popup is not open by default on page load of second page. Looks like its hidden and the controller code of opening the modal is not triggered.

Is there something else I need to add.

-----------Updated--------------

Here is my plunkr http://jsfiddle.net/b9y2Lc5x/

I found out the issue but not the solution. The issue is I am using factory as my angular service & I had defined my modal in that service. In my controller I was calling my service as:

        $scope.mymodal = myService.createModal;

And in my serivice there is no createModal variable/method. Not sure why its not giving error in my application but gave error in my jsfiddle.

So now 2 questions here: - How do I define createModal in my service so that it can be called from my controller. - Is this the correct way to call a modal ie from controller to service. Or should I move the logic of opening modal in my controller.

Try replacing href="#/second-page" with ui-sref="second-page" — Protozoid
– Protozoid, Commented Jun 21, 2018 at 21:17
@kaka1234 thanks for adding jsfiddle, I've updated my answer with a working solution. — Protozoid
– Protozoid, Commented Jun 22, 2018 at 15:49

Protozoid · Accepted Answer · 2018-06-22 15:49:08Z

1

The $modal.open() function returns a promise (in the result property).

When the modal is closed with $modalInstance.close(), the promise will be resolved.

When the modal is closed with $modalInstance.dismiss(), the promise will be rejected.

You should trigger the redirect after the modal has fully closed, in the promise handling code, as such:

var modalInstance = $modal.open({
    templateUrl: myUrl + 'app/page/modal.html',
    controller: 'secondPageCtrl',
    backdrop: 'static',
    keyboard: false
});

modalInstance.result.then(function () {
    // Success, do nothing
}, function () {
    $state.go('first-page');
});

EDIT after OP added JSFiddle:

The issue is that your modal is opened when the factory is instantiated. Services (and factories) in AngularJS are singletons, meaning they are only instantiated once.

Change your factory to this:

app.factory("myService",[ "$state", "$modal", "ApiFactory",
    function ($state, $modal, factory) {
            var service = {
            openModal: openModal
        };

        function openModal () {
            var modalInstance = $modal.open({
                templateUrl: 'modal.html',
                controller: 'ModalController',
                backdrop: 'static',
                keyboard: false
            });

            modalInstance.result.then(function() {
                // Success, do nothing
            }, function() {
                $state.go('index');
            });

            return modalInstance;
        }

        return service;
    }
]);

And call the openModal function in your controller (controllers are instantiated every time a state becomes active)

$scope.mymodal = myService.openModal();

Working JSFiddle here: http://jsfiddle.net/Protozoid/z20yvbfx/.

edited Jun 22, 2018 at 15:49

answered Jun 21, 2018 at 16:18

Protozoid

1,2071 gold badge8 silver badges16 bronze badges

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

4 Comments

aman Over a year ago

I removed $state.go and added as you mentioned above but the result is still the same. The modal popup does not show once I redirect to first page and come back to second page. On the second page when I press F5 ie refresh my page, I then see the modal.

aman Over a year ago

I have updated my question with jsfiddle pls see above.

aman Over a year ago

Thanks works fine. One last ques, the modal pop up apart from cancel also has a done button, which when clicked need to close the modal and pass the info from modal to the controller. I will work on how to pass these values. But the issue is with the code you have if I add modal.dismiss on the done button click then it does direct me to the previous page, I believe because of we have $state.go('index'); inside the modalinstance. Is there a way to handle this? I have remove this code and made the change where I am changing state from click event see updated: jsfiddle.net/z20yvbfx/3

Protozoid Over a year ago

@kaka1234 You should use my example and close the modal window with $modalInstance.close('close');, not .dismiss() again. Please read the Modal documentation and examples more carefully.

Collectives™ on Stack Overflow

AngularJs: Automatically open modal on page load

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related