使用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>