控制器变量更改未反映在 angular 模态中

Question

我正在使用 controllerAs 语法并从中打开 angular-ui 模态对话框，并使用 "resolve" 将变量传递给模态控制器。打开后，我正在执行 ajax "request"，并将 "updating" 变量传递给模态控制器。然而，在模态控制器中，这种变化没有反映出来。代码片段：

angular.module('main')
.controller('mainCtrl', ['$modal', function($modal){
    vm = this;
    vm.paymentMessage = 'We are processing you request. Wait a moment.';
    vm.showModal();
    testService.TestAjax().then(function(response){
            vm.paymentMessage = response.data.message;
   });
   vm.showModal = function() {
        var modalConfig = {
            controller: 'ModalProcessingCtrl as modalProcessingCtrl',
            templateUrl: 'template/processingModal.html',
            size: 'lg',
            resolve: {
                paymentMessage: function () {
                    return vm.paymentMessage;
                }
            }
        };
        $modal.open(modalConfig).result;
    };
 }])
.controller('ModalProcessingCtrl', ['$modalInstance','paymentMessage', function($modalInstance, paymentMessage){
    self = this;
    self.paymentMessage = paymentMessage;
    self.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}])

模板是这样的：

    <script type="text/ng-template" id="template/processingModal.html">
      <div class="modal-header">
        <button type="button" class="close" ng-click="modalProcessingCtrl.cancel()"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="id_card_processing_label">Processing</h4>
      </div>
      <div class="modal-body">
            <div>
              <p>{{ modalProcessingCtrl.paymentMessage }}</p>
            </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="modalProcessingCtrl.cancel()">Close</button>
      </div>
    </script>

我可以看到最初设置的消息，但在 ajax 请求调用完成后没有更新消息。有什么方法可以在 modalProcessingCtrl 中反映来自 mainCtrl 的 paymentMessage 的更改并在模式对话框中显示它？谢谢

Answer 1

试试这个解决方案，如果正确就接受答案:)

angular.module('main')
        .controller('mainCtrl', ['$modal', function($modal) {
            vm = this;
            vm.paymentMessage = 'We are processing you request. Wait a moment.';
            vm.showModal();
            /*testService.TestAjax().then(function(response) {
                vm.paymentMessage = response.data.message;
            });*/
            vm.showModal = function() {
                var modalConfig = {
                    controller: 'ModalProcessingCtrl as modalProcessingCtrl',
                    templateUrl: 'template/processingModal.html',
                    size: 'lg',
                    resolve: {
                        /*paymentMessage: function() {
                            return vm.paymentMessage;
                        } , */
                        paymentMessage: ['$q', 'testService', function($q, testService) {
                            var defer = $q.defer();
                            testService.TestAjax().then(function(response) {
                                defer.resolve(response.data.message);
                            });
                            return defer.promise;
                        }]

                    }
                };
                $modal.open(modalConfig).result;
            };
        }])
        .controller('ModalProcessingCtrl', ['$modalInstance', 'paymentMessage', function($modalInstance, paymentMessage) {
            self.paymentMessage = paymentMessage;
            self.cancel = function() {
                $modalInstance.dismiss('cancel');
            };
        }])

Answer 2

试试这个方法：

    angular.module('main)
            .controller('mainCtrl', ['$modal', function($modal) {
                vm = this;
                vm.paymentMessage = 'We are processing you request. Wait a moment.';
                vm.showModal();
                vm.showModal = function() {
                    var modalConfig = {
                        controller: 'ModalProcessingCtrl as modalProcessingCtrl',
                        templateUrl: 'template/processingModal.html',
                        size: 'lg',
                        resolve: {
                            paymentMessage: function() {
                                return vm.paymentMessage;
                            }
                        }
                    };
                    $modal.open(modalConfig).result;
                };
            }])
            .controller('ModalProcessingCtrl', ['$modalInstance', 'paymentMessage', function($modalInstance, paymentMessage) {
                self.paymentMessage = paymentMessage;
                testService.TestAjax().then(function(response) {
                    self.paymentMessage = response.data.message;
                });
                self.cancel = function() {
                    $modalInstance.dismiss('cancel');
                };
            }])

在控制器加载和模板呈现之前使用 resolve 触发。这是一次性的事情。

Answer 3

将 resolve 函数更改为 return 承诺，而不是尚未定义的值：

        resolve: {
            paymentMessage: function() {
                //return vm.paymentMessage;
                var promise = testService.TestAjax();
                var messagePromise = promise.then(function(response) {
                    //return data for chaining
                    return response.data.message;
                });
                return messagePromise;
             }
         }

通过 return 对 resolve 函数的承诺，模态将在从服务器 returned 后获取消息的值。如果发生服务器错误，它将作为被拒绝的承诺传播。

因为调用承诺的 .then 方法 return 是一个新的派生承诺，所以很容易创建承诺链。可以创建任意长度的链，并且由于一个 promise 可以用另一个 promise 解决（这将进一步延迟其解决），因此可以 pause/defer 在链中的任何点解决 promise。

-- AngularJS $q Service API Reference -- Chaining Promises.

控制器变量更改未反映在 angular 模态中

Controller variable change does not reflect in angular modal

modal-dialog

angularjs

angular-ui