CODEWITHSUNDEEP
angularjsangular-ui
anad2312
anad2312

Reputation: 787

AngularJS - How to Create a Modal Dialog from the Controller

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

Upvotes: 1

Views: 2291

Answers (1)

Farhan Khan
Farhan Khan

Reputation: 590

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

Upvotes: 2

Related Questions