CODEWITHSUNDEEP
angularjs
aman
aman

Reputation: 6242

AngularJs: Automatically open modal on page load

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.

Upvotes: 0

Views: 2448

Answers (1)

Protozoid
Protozoid

Reputation: 1207

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/.

Upvotes: 1

Related Questions