如何在ngDialog中加载数据

Question

我有一个要求,我需要从jsp页面打开一个对话框,在打开对话框时,我需要从服务器加载一些预先填充的数据(使用AJAX调用).如果我在打开对话框之前进行AJAX调用,我会得到数据,但对话框会像新页面一样加载.如果我尝试在新控制器中获取数据,则对话框仍然不会反映数据.我应该使用什么来确保对话框反映了我从服务器获取的数据

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

以上是对话框的jsp.下面是我的js文件 -

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");     
        });     

    }

});

我在usersettings控制器中打开一个对话框,并尝试使用默认数据加载它.我尝试将新对话框的模板设置为AJAX调用的输出,但它不起作用.我在这里错过了什么？

Answer 1

在查阅文档后,我学习了以下解决方案.它应该对你有用,就像它对我一样.

要在其中传递ng-model的数据(JSON对象)ngDialog,您可以声明ngDialog如下.

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

现在,上述部分完成的,你需要将数据绑定在弹出ngDialog,所以去把ngDialogData.myJSONObjectFieldName你的ng-model.

请考虑以下示例以进一步阐述.我们假设我们有myJSONObject如下.

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

要first_name在ngDialog中使用ng-model,只需放入即可ng-model="ngDialogData.first_name".