如何将数据从模态传递给函数

时间:2014-07-11 09:43:31

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

我有一个模态表单,有几个输入文本格式控件。如何传递数据以发布到数据库以便ng-grid更新?

我是否在ajax控制器部分调用了我的$scope.open创建功能?或解决?

$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>

1 个答案:

答案 0 :(得分:0)

您可以在点击添加服务时向服务器发出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
  });
};

希望这有帮助。