Bootstrap DateTimePicker - 关于 Angular 的更改事件

Question

给出下面的演示：

我希望每次日期更改时我的控制器值都更新。因此，每次从下面的框中选择新日期时，ng-model 的值都会更改。

然而，在使用以下指令后，我得到了上面写的错误。

app.directive('datetimepicker', function () {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {

            element.datetimepicker({

                onRender:function (date) {

                    // Triggers a digest to update your model
                    scope.$apply(function () {
                        ngModelCtrl.$setViewValue(date);
                    });

                }

            });
        }
    } 
});

如何检测日期时间选择器 Angular 的变化？

Answer 1

Bootstrap的datetimepicker插件不支持构造器选项中的change事件，但是可以使用元素的dp.change事件您刚刚将 datetimepicker 添加到：

  element.datetimepicker({});
  element.on('dp.change', function(event) { 
    scope.$apply(function () {
      ngModelCtrl.$setViewValue(event.date.format());
    });
  })

这是对您的 jsfiddle 的更新：
http://jsfiddle.net/dekelb/fc9kuy3x/3/

Answer 2

Eonasdan bootstrap datimepicker 在日期更改时触发 dp.change。使用选定日期更新模型的一种方法是使用以下代码：

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

myApp.controller('mainCtrl', ['$scope', function($scope) {
  $scope.compared_date = "Compare Date";
}]);


myApp.directive('datetimepicker', function () {
  return {
    restrict: 'A',
    require : 'ngModel',
    link : function (scope, element, attrs, ngModelCtrl) {

      element.datetimepicker().on('dp.change', function(e) {
        scope.compared_date = e.date;
      });
    }
  } 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div ng-app="myApp" ng-controller="mainCtrl">

  <div class='input-group date' id='datetimepickerday'>
    <input datetimepicker class="form-control" ng-model="compared_date"/>
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
  Model is: {{compared_date}}
</div>

注意 e.date 是一个力矩对象。而且eonasdan的datetime picker是为bootstrap/jQuery环境而生的，我认为我不应该在angular项目中使用，Angular Wrapper在官方文档中有链接。

Bootstrap DateTimePicker - 关于 Angular 的更改事件

Bootstrap DateTimePicker - on change event for Angular

jquery

datetimepicker

twitter-bootstrap

angularjs