Question

我正在使用controllerAs语法并从中打开angular-ui模式对话框，并使用＆＃34; resolve＆＃34;将变量传递给模态控制器。打开后，我正在执行ajax＆＃34;请求＆＃34;和＆＃34;更新＆＃34;变量传递给模态控制器。但是在模态控制器中，这种变化没有反映出来。代码段：

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

更改resolve函数以返回promise而不是尚未定义的值：

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

通过将promise发送给resolve函数，modal将在从服务器返回消息后获取消息的值。如果发生服务器错误，它将作为被拒绝的承诺传播。

因为调用promise的.then方法会返回一个新的派生promise，所以很容易创建一个promise链。可以创建任意长度的链，并且由于可以使用另一个承诺来解决承诺（这将进一步推迟其解析），因此可以在链中的任何点暂停/推迟承诺的解析。

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

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

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

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');
            };
        }])

控制器变量变化不会反映在角度模态中

3 个答案: