AngularJS - How to Create a Modal Dialog from the Controller

Question

I am able to create a Modal Dialog from within the html file, but I need to click a button, do some logic in the controller (i.e. service call and validate data), and based off of the response, I need to popup a modal dialog from within the controller in order to inform the user that there is an error.

I have figured out how to do it from within the html file, but it will not popup from within the controller. Here are snippets of what I have:

login.html - Contains a form with a submit button (I am not pasting the entire file):

  <form name="loginPage" class="form-signin" role="form" style="position: absolute; margin: 250px 0px 0px 500px;" ng-submit="submitForm(userForm.$valid)">
<h2 class="form-signin-heading">Login</h2>
<input type="text" class="form-control" ng-model="name" placeholder="Username" required autofocus>
<input type="password" class="form-control" ng-model="password" ng-click="password" placeholder="Password" required>
<label class="checkbox">
    <input type="checkbox" value="remember-me"> Remember me
</label>
<input type="submit" class="btn btn-lg btn-primary btn-block" value="Log In"/>

controllers.js - Contains this code (I am not pasting the entire file):

 $scope.submitForm = function () {
      //Making an Ajax service call (SOAP service call being made) in this function, and then results will then call a function named ajaxFinish

 $.ajax({
        url: productServiceUrl,
        type: "POST",
        dataType: "xml",
        data: soapMessage,
        processData: false,
        success: function (xml) {
            ajaxFinish($scope, xml);
        },
        contentType: "text/xml; charset=utf-8"
    });

}

  function ajaxFinish($scope, xml) {
      var modalInstance = $modal.open({
        templateUrl: 'view/myModalContent.html',
        controller: ModalInstanceCtrl,
        resolve: {
            items: function () {
                return $scope.items;
            }
        }
    });
 }

myModalContent.html -

 <label>Alert Message!</label>

When I debug, it hits the ajaxFinish method, but nothing opens up. I am using stateProvider. I have a file called modules.js that contains a bunch of pages, one of which is the modal dialog:

modules.js (A snippet of some of the code) -

         .state('main.myModalContent', {
            url: '',
            controller: ModalDemoCtrl,
            templateUrl: 'view/myModalContent.html'
        })

When I try the Plunker in the comments below, my modal dialog pops up on the left of the screen... completely cut off. See screenshot: enter image description here

@FarhanKhan I have defined ModalInstanceCtrl. I tried your exact example and it now pops up, but it pops up weird... the popup is on the left side of the screen where you cannot see it. I will post a screenshot. — anad2312
– anad2312, Commented Mar 27, 2014 at 14:46
That looks like a CSS issue. Did you modify or override bootstrap css? What does your custom css look like? — Farhan Khan
– Farhan Khan, Commented Mar 27, 2014 at 16:26
Ha! Got it! There was a bad reference to a different bootstrap.css file. All the refactoring must have missed that file. I removed that reference and it works. Thanks! If you put your comment in an answer, I can mark your answer as the correct fix. — anad2312
– anad2312, Commented Mar 27, 2014 at 17:30

Farhan Khan · Accepted Answer · 2014-03-27 18:26:21Z

2

Glad you got it sorted out. If anyone else runs into issues, use the plunker as reference. If the modal shows up, but is off screen, check your css. You've probably overridden bootstrap css modal classes. There's good documentation on angular-ui website, as well as the github page.

REFERENCES

edited Mar 27, 2014 at 18:26

answered Mar 27, 2014 at 18:12

Farhan Khan

5905 silver badges6 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - How to Create a Modal Dialog from the Controller

1 Answer 1

REFERENCES

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

REFERENCES

Comments

Your Answer

Sign up or log in

Post as a guest

Related