使用AngularJS引导DateTimePicker：将指令ngModel值传递给控制器​​

Question

我正在尝试使用如下所示的自定义指令来获取角度引导datetimepicker输入值。我能够获得指令的价值。如何在角度控制器中访问此指令范围值。

HTML

<div class='input-group date' id='datetimepickerId' datetimez ng-model="dueDate" > 
      <input type='text' class="form-control" /> 
    </div> 

控制器成功指令打印值内

App.directive('datetimez', function(){ 
    return { 
     require: '?ngModel', 
     restrict: 'A', 
     link: function(scope, element, attrs, ngModel){ 
      if(!ngModel) return; 
      ngModel.$render = function(){ 
       element.find('#datetimepickerId').val(ngModel.$viewValue || ''); 
      }; 
      element.datetimepicker({ 
       format : 'YYYY-MM-DD HH:mm:ss' 
      }); 
      element.on('dp.change', function(){ 
       scope.$apply(read); 
      }); 
      read(); 
      function read() { 
       var value = element.find('#datetimepickerId').val(); 
       ngModel.$setViewValue(value); 
       console.log(scope.dueDate); 
      } 
     } 
    }; 
}); 

App.controller('myController', ['$scope', function($scope) { 
    console.log($scope.dueDate); 
}]); 

日志。但是登录内部控制器不会。

Answer 1

你在这里。

我查了一下bootstrap datetimepicker的文档，结果知道有两个实现。

1. 一个带有图标的点击和展示datetimepicker
2. 另外一只是一个文本框没有图标

对于第一个，你必须使用父div来启动插件对于第二个选项，您必须使用文本框来启动插件

您已经使用了第二个选项，但使用父div来启动插件，其中包含directive。

此外，div元素将不支持ngModel，因此指令应与input元素一起使用。

我已经扩展了您的指令来处理这两种情况，日期格式和其他选项也可以从controller传递。

您可以试试下面的工作片段。

var App = angular.module('App', []); 
 

 
App.directive('datetimez', function(){ 
 
    return { 
 
     require: '?ngModel', 
 
     restrict: 'A', 
 
     link: function(scope, element, attrs, ngModel){ 
 
      if(!ngModel) return; 
 
      
 
      ngModel.$render = function(){ 
 
       element.val(ngModel.$viewValue || ''); 
 
      }; 
 
      
 
      function read() { 
 
       var value = element.val(); 
 
       ngModel.$setViewValue(value); 
 
       //console.log(scope.dueDate); 
 
      } 
 
      
 
      var options = scope.$eval(attrs.datetimez) || {}; 
 
      if(element.next().is('.input-group-addon')) { 
 
       var parentElm = $(element).parent(); 
 
       parentElm.datetimepicker(options); 
 
      
 
       parentElm.on('dp.change', function(){ 
 
       scope.$apply(read); 
 
       }); 
 
      } else { 
 
       element.datetimepicker(options); 
 
      
 
       element.on('dp.change', function(){ 
 
       scope.$apply(read); 
 
       }); 
 
      } 
 
      
 
      read(); 
 
     } 
 
    }; 
 
}); 
 

 
App.controller('myController', ['$scope', function($scope) { 
 
    
 
    $scope.datePickerOptions = { 
 
     format : 'YYYY-MM-DD HH:mm:ss' 
 
    }; 
 
    
 
    $scope.$watch('dueDate1', function(){ 
 
     console.log($scope.dueDate1); 
 
    }); 
 
    
 
    $scope.$watch('dueDate2', function(){ 
 
     console.log($scope.dueDate2); 
 
    }); 
 
}]); 
 

 
angular.bootstrap(document, ['App']);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<div class="container" ng-controller="myController"> 
 
    
 
    <div class="row"> 
 
     <div class='col-md-6'> 
 
      <div class="form-group"> 
 
       <div class='input-group date' id='datetimepicker1'> 
 
        <input type='text' class="form-control" datetimez="datePickerOptions" ng-model="dueDate1" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
     <div class='col-md-6'> 
 
      <div class="form-group"> 
 
       <div class='input-group date' id='datetimepicker1'> 
 
        <input type='text' class="form-control" datetimez="datePickerOptions" ng-model="dueDate2" /> 
 
        <span class="input-group-addon"> 
 
         <span class="glyphicon glyphicon-calendar"></span> 
 
        </span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>