控制变量的变化并不能反映角模式

Question

我使用controllerAs语法和开角UI模式对话框从它通过使用“解析”，以模态控制器变量。 打开后，我正在执行传给模态控制器的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'); 
    }; 
}]) 

和tamplate是这样的：

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

通过返回的承诺的决心功能，进行模态后，得到消息的价值已从服务器返回。如果发生服务器错误，它将作为被拒绝的承诺传播。

由于调用承诺的.then方法会返回一个新的派生承诺，因此很容易创建一个承诺链。有可能创建任意长度的链，并且由于承诺可以通过另一个承诺来解决（这会进一步延迟其解决方案），因此可以在链中的任何时刻暂停/推迟解决承诺。

- 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(); 
      /*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 3

试试这个方法：

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

呈现控制器负载和模板之前，使用的决心火灾了。这是一次性的事情。