How to load data in ngDialog

Question

I have a requirement where I need to open a dialog from a jsp page and while opening the dialog, I need to load it with some prepopulated data from the server (using an AJAX call). If I make the AJAX call before opening the dialog, I get the data but the dialog loads like a new page. If I try to get the data in the new controller, the dialog still does not reflect the data. What should I use to make sure the dialog reflects the data that I am getting from the server

<div class="container-fluid" ng-controller="EditUserController">

    <div class="text-center container-fluid">
        <label class="sub-header">Edit User: {{userEmail}}</label>
    </div>

    <form action="editUser" method="post" name="editForm">
        <div>
            <div class="pull-right">
                <label>Delete User</label><br> <a href="#"
                    class="btn btn-block btn-sm btn-danger" ng-click="deleteUser(userEmail)">{{userEmail}}</a>
            </div>
            <div>
                <label>Change Role</label>
            </div>
            <div>
                <label>
                <input type="checkbox" ng-model="superVisor" name="superVisorFlag" 
                ng-true-value="1" ng-false-value="0" value="${existingUser.superVisorFlag}">
                Make a Supervisor</label>
            </div>
            <div>
                <input type="text" class="form-control" ng-model="email"
                    name="emailAddress" ng-disabled = "true"
                    ng-options="email for email in userEmail"
                    value="${existingUser.emailAddress}"
                    placeholder="Enter New User Email Address" bs-typeahead>
            </div>
            <div>
                <input type="text" class="form-control" ng-model="firstName"
                    name="firstName" value="${existingUser.firstName}"
                    placeholder="Enter First Name" bs-typeahead>
            </div>
            <div>
                <input type="text" class="form-control" ng-model="lastName"
                    name="lastName" value="${existingUser.lastName}"
                    placeholder="Enter Last Name" bs-typeahead>
            </div>


            <div>
                <a href="#" class="btn btn-sm btn-primary" ng-click="saveChanges()">Save Changes</a>
            </div>
        </div>
    </form>

</div>

<script type="text/javascript"
    src="<c:url value="/resources/scripts/admin.js"/>"></script>

The above is a jsp for the dialog. Below is my js file -

var app = angular.module('scc-admin', [ 'ngDialog', 'mgcrea.ngStrap' ]);
app.factory("UserList", function() {
    var UserList = {};
    UserList.data = [ {
        userId : 111,
        userFirstName : "xxx",
        userLastName : "yyy",
        userEmail : "xxx.yyy@zzz.com",
        userRole : "Admin"
    }, {
        userId : 222,
        userFirstName : "second",
        userLastName : "last",
        userEmail : "second.last@zzz.com",
        userRole : "Manager"
    }];
    return UserList;
});
app.controller('UserSettingsController', function($scope, ngDialog, UserList,$http) {
    // variable for the bashboard list
    $scope.userList = UserList;
    $scope.editUser = function(userEmail) {             
        $scope.userEmail = userEmail;       
        ngDialog.open({
            template : 'editUser' ,
            className : 'ngdialog-theme-default',
            controller : 'EditUserController',
            closeByEscape : true,
            scope : $scope
        });
    };

    $scope.addUser = function() {
        ngDialog.open({
            template : 'addUser',
            className : 'ngdialog-theme-default',
            controller : 'AddUserController',
            closeByEscape : true,
            scope : $scope
        });
    };

});

app.controller('EditUserController', function($scope, ngDialog, $http) {

    ngDialog.template = $scope.output;
    ngDialog.$modelValue = $scope.output;

    var responsePromise = $http.get("initUser?email=" + $scope.userEmail);
        responsePromise.success(function(data, status, headers, config) {
                $scope.output = data;
                console.log(data);                
        });
    console.log($scope);

    $scope.deleteUser = function(){

        $scope.cfdump = "";

        var str = {emailAddress : $scope.userForm.emailAddress.$modelValue};
        str = JSON.stringify(str);

        var request = $http({
            method: 'post',
            url: "deleteUser?formData=" + str,
            data: ({formData:str})
        });

        request.success(function(html){
            alert("success");
        });

        request.error(function(errmsg){
            alert("Unable to delete user");     
        });     

    }

});

I am opening a dialog in usersettings controller and trying to load it with default data. I tried setting the new dialog's template to the output of the AJAX call, it did not work. What am I missing here?

Answer 1

To check whether the controller(VM) data is received in Modal Dialog use this

 <pre>{{vm|json}}</pre>

Module and Controller:

var app = angular.module("DemoApp",['ngDialog']);
    app.controller("DemoController",["$rootScope","ngDialog","productService",function($rootScope,ngDialog,productService){
        var vm=this;
         $rootScope.ngDialog = ngDialog; // to close Dialog using "ngDialog.close();" in ProductDialog.html

 /* vm.products=[{brand:"Apple", price:60000, os:"iOS"},
             {brand:"Samsung", price:35000, os:"Android"},
             {brand:"Microsoft Lumia", price:30000, os:"Windows 10"}
            ];  
 */

vm.getProductDetails=function() {
            productService.getData().then(function (response) {
                if (response.data) {
                    vm.products=response.data;
                    vm.ProdDialog();
                }
            });
    };

vm.productPopup = function(x){
    ngDialog.open({
        template: 'ProductDialog.html',
        className:'ProductDetailsDialog'
        scope:$scope,
        data:x,
        closeByDocument:true
    });
}
      vm.getProductDetails();
}]);

Service:

app.factory("productService",["$http",function($http){
    return {
        getData: function() {
            return $http.get("http://xxxxxxx/xxx/xxxxx");
        }
     };
}]);

DemoController.html

   /* <table>
        <tr>
            <th>Brand</th>
            <th>Price</th>
            <th>OPerating System</th>
            <th>Open ngDialog</th>
        </tr>
        <tr  ng-repeat="x in vm.products">
            <td ng-bind="x.brand"></td>
            <td ng-bind="x.price| currency:"&#8377;":2"></td>
            <td ng-bind="x.os"></td>
            <td><button ng-click="vm.productPopup(x)"></button></td>

        </tr>
    </table>
*/

ProductDialog.html:

<div class="ProductDetailsDialog">
    <div class="ngdialog-content" role="document">
        <div class="modal-header">
            <button type="button" class="close" ng-click="ngDialog.close();">&times;</button>
            <h4 class="modal-title">Product Detials</h4>
        </div>
               //  <pre>{{vm|json}}</pre> //
        <div class="modal-body">
            <h4>Brand:<span ng-bind="ngDialogData.brand"></span></h4>
            <h4>Price:<span ng-bind="ngDialogData.price | currency:"&#8377;":2"></span></h4>
            <p>Operating System:<span ng-bind="ngDialogData.os"></span></p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default">OK</button>
        </div>
    </div>
</div>

Answer 2

After consulting the documentation, I learned following solution. It should work for you like it did for me.

To pass data (JSON Object) for ng-model inside the ngDialog, you can declare your ngDialog as following.

ngDialog.open({
    template: 'my-template.html',
    className: 'ngdialog-theme-plain',
    data: $scope.myJSONObject
});

Now, with the above part done, you need to bind the data in your popup ngDialog, so go and put ngDialogData.myJSONObjectFieldName in your ng-model.

Consider following example for further elaboration. We assume that we have myJSONObject as following.

myJSONObject={
   first_name: 'John',
   last_name: 'Doe'
};

To use first_name inside your ngDialog's ng-model, simply put ng-model="ngDialogData.first_name".