Question

我创建了一个模态窗口，在用户将数据输入表单后显示。默认情况下，模态窗口有一个我想要消失的加载图标，并替换为从我的服务返回的结果。问题是，一旦我创建模态窗口，我无法更新模态中的范围以显示返回的结果。

searchCustomers.js

$app.directive('searchCustomers', function (CustomerService, $modal) {
    return function (scope, element, attrs) {
        element.bind("keyup", function (event) {
            if(event.keyCode == '9') {
                if(Object.keys(scope.customer).length >= 3){
                    console.log('Find the customers');

                    var modalInstance = $modal.open({
                        templateUrl: 'loading.html',
                        controller: 'ModalInstanceController'
                    });

                    modalInstance.result.then(function(){
                        scope.data = CustomerService.findAll();
                    })

                }

                event.preventDefault();
            }
        });
    };
});

客户表格

<div class="row">
                        <div class="col-md-6">
                            <div class="form-group form-group-default required">
                                <label>Title</label>
                                <input type="text" class="form-control" required="" ng-model="customer.title" search-customers="">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group form-group-default required">
                                <label>First Name</label>
                                <input type="text" class="form-control" required="" ng-model="customer.firstName" search-customers="">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group form-group-default required">
                                <label>Surname</label>
                                <input type="text" class="form-control" required="" ng-model="customer.surname" search-customers="">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group form-group-default required">
                                <label>Company Name</label>
                                <input type="text" class="form-control" required="" ng-model="customer.company" search-customers="">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group form-group-default required">
                                <label>D.O.B</label>
                                <input type="text" class="form-control" required="" ng-model="customer.dob">
                            </div>
                        </div>
                    </div>

ModalInstanceController.js

$app.controller('ModalInstanceController', function ($scope, $modalInstance) {

    $scope.title = 'title here';
    $scope.message = '';
    $scope.data = '';

    $scope.ok = function () {
        $modalInstance.close();
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

Loading.html

<div class="modal-header">
        <h3 class="modal-title">{{title}}</h3>
    </div>
    <div class="modal-body">
        <div class="text-center">
            <div class="progress-circle-indeterminate m-t-45"></div>

                <div class="small-text">{{ data }}</div>

        </div>
    </div>
    <div class="modal-footer">
    </div>

Answer 1

modalInstance.result.then

关闭对话框后将调用

，显然这里不正确。如果要将查询数据传递到新对话框，则应编写类似

的代码

$scope.addLoadGenerator = function() {
    var modalInstance = $modal.open({
        templateUrl: 'loading.html',
        controller: 'ModalInstanceController',
        resolve: {
            newDialogData: function() {
                return CustomerService.findAll();;
            }
        }
    });

在你的模态对话框中获取数据：

$app.controller('ModalInstanceController', ['$scope', '$modalInstance', 'newDialogData', function ($scope, $modalInstance, newDialogData) {
   ...
}]);

在创建模态后更新我的模态范围时遇到问题

1 个答案: