如何将数据从模态传递到函数答案

【问题标题】：how to pass data from modal to function如何将数据从模态传递到函数
【发布时间】：2014-07-11 09:43:30
【问题描述】：

我有一个模态表单，它有几个输入文本表单控件。如何将数据传递到数据库以便更新ng-grid？

我是否在$scope.open 控制器部分调用我的ajax 创建函数？还是解决？

$scope.open = function (size) {
  var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: ModalInstanceCtrl,
    size: size,
    resolve: {
      items: function () {
        return $scope.items;
      }
    }
  });
};
}]);

创建函数

     $scope.createMedicalServices = function(){
     var providerMedicalServiceAttributes = {};
     providerMedicalServiceAttributes.cash_price = $scope.cash_price
     providerMedicalServiceAttributes.average_price = $scope.average_price
     providerMedicalServiceAttributes.service = $scope.service
     var medicalServicesAttributes = {};
     medicalServicesAttributes.description = $scope.description
     medicalServicesAttributes.service = $scope.service
     var newMedicalService = ProviderMedicalService.create(providerMedicalServiceAttributes);
     $scope.provider_medical_services.push(newMedicalService);
     ProviderMedicalService.update(providerMedicalServiceAttributes, '/providers/services');
 };

从工厂创建函数（工厂会删除、查询和创建）

ProviderMedicalService.prototype.create = function(attr){
  return this.service.save(attr);
}

模态表单的html

<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
    <div class="header-modal">
        <h3>Add Service</h3>
    </div>
    <div class="modal-body">
        <form name="myForm" novalidate ng-submit="submit()">
            <div class="row well-text-padding">
                <div class="col-md-3 modal-form-tag">CPT Code</div>
                <div class="col-md-6">
                    <input type="text" class="form-control form-control-modal" ng-model="CPT_code" placeholder="CPT Code">
                </div>
            </div>   

            <label class="checkbox modal-check-box">
                <input type="checkbox" ng-model="No_CPT_code">Service does not have a associated CPT Code
            </label>

            <div class="row well-text-padding">
                <div class="col-md-3 modal-form-tag">Description</div>
                <div class="col-md-6">
                    <textarea class="form-control form-control-modal" rows="3" ng-model="Description" placeholder="Add a Description"></textarea>
                </div>
            </div>

            <div class="row well-text-padding">
                <div class="col-md-3 modal-form-tag">Average Cost</div>
                <div class="col-md-6">
                    <input type="text" class="form-control form-control-modal" ng-model="Average_cost" placeholder="$">
                </div>
            </div>

            <div class="row well-text-padding">
                <div class="col-md-3 modal-form-tag">Offered Price</div>
                <div class="col-md-6">
                    <input type="text" class="form-control form-control-modal" ng-model="Offered_price" placeholder="$">
                </div>
            </div>

            <div class="btn-row2 modal-button-row">
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                <button class="btn btn-primary" type="submit">Add Service</button>
            </div>
</script>

【问题讨论】：

标签： javascript jquery ruby-on-rails ajax angularjs

【解决方案1】：

您可以在单击添加服务时向服务器发出 POST 请求，也可以通过$scope.$close() 将数据从模态传递到主控制器。

示例如下：

在模态控制器中

var data = {
  CPT_code: $scope.CPT_code,
  No_CPT_code: $scope.No_CPT_code,
  Description: $scope.Description,
  Average_cost: $scope.Average_cost,
  Offered_price: $scope.Offered_price
};

$scope.$close(data); // pass the data through modal close event

然后在你的主控制器中通过使用 promise 来获取数据

$scope.open = function (size) {
  var modalInstance = $modal.open({
     templateUrl: 'myModalContent.html',
     controller: ModalInstanceCtrl,
     size: size,
     resolve: {
        items: function () {
           return $scope.items;
        }
     }
  }).result.then(function (response) {
     var data = response;  // here is your data from your modal
  });
};

希望这会有所帮助。

【讨论】：