如何在AngularJS中将uibmodel对话框文本框值获取到父控制器

时间:2019-05-27 16:49:04

标签: angularjs angular-ui-modal

我有一个带有文本框的页面,这是一个单独的控制器。当单击文本框时,会使用ui-bootstrap使用uibmodal打开一个模式对话框。在该模型中,当选择这两个日期字段并单击“应用”按钮时,有两个日期选择器字段,然后需要在父文本框中呈现那些选择的两个文本框值。如何使用angularjs实现此目标,尝试了许多方法却无济于事

尝试了以下代码

$scope.openDateTimePicker = function(object){
    console.log("Inside function");
    $scope.animationsEnabled = true;
    var modalInstance = $uibModal.open({
         animation: $scope.animationsEnabled,
         templateUrl: 'datepicker.tpl.html',
         controller: 'DateInstanceCtrl',
         size: 'sm',
         resolve: {
         items: function () {
            return $scope.items;
           }
          }
      });
};




.controller('DateInstanceCtrl', function ($scope, $uibModalInstance) {
  $scope.apply = function () {
     console.log("value:::"+$uibModalInstance.startDateTime);
     $uibModalInstance.close();
  };
  $scope.close = function () {
    $uibModalInstance.dismiss('close');
  };
})

datepicker.tpl.html

<header class="modal-header"></header>
<div class="modal-body">

    <table>
        <tr>
            <td>Start Date</td>
            <td><input type="datetime-local" id="startDateTime"
                name="startDateTime" ng-model="startDateTime"
                placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00"
                max="2199-12-31T00:00:00" required /></td>
        </tr>
        <tr>
            <td>End Date</td>
            <td><input type="datetime-local" id="endDateTime"
                name="endDateTime" ng-model="endDateTime"
                placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00"
                max="2199-12-31T00:00:00" required /></td>
        </tr>
    </table>
</div>
<div class="modal-footer">
    <button ng-click="apply()" class="btn btn-primary">Apply</button>
    <button ng-click="close()" class="btn">Close</button>
</div>

0 个答案:

没有答案