Angularjs。 在datepicker中没有更新ng-model

我试图编写jquery来使用隐藏的输入区域在文本点击上打开datepicker。 此外，这在多个地方也是必需的。

以下是我的HTML。

  {{date1 | date: 'dd MMM yyyy a'}} 
 
  {{date2 | date: 'dd MMM yyyy a'}}  

以下是javascript –

 var app = angular.module('index-app', []); app.controller('index-controller', function($scope) { $scope.date1 = new Date(2016, 0, 1); $scope.date2 = new Date(); $('.hidden-date-picker').each(function() { $(this).datepicker({ changeYear: 'true', changeMonth: 'true', startDate: '07/16/1989', firstDay: 1, onSelect: function(dateText, inst) { console.log($scope.$eval($(this).attr('ng-model'))); $scope.$eval($(this).attr('ng-model')).setTime(Date.parse(dateText)); console.log($scope.date1); } }); }); $('.date-picker').each(function() { $(this).click(function (e) { $('#hidden-' + $(this).attr('id')).datepicker('show') e.preventDefault(); }); }); }); 

从控制台输出中可以清楚地看到，在从日历中选择日期时，$ scope.date1正在被修改。 但这种变化并未在html方面得到反映。

Answer 1

使用指令可以解决ng-model未更新的问题

你的HTML代码

在输入标记中添加指令“ customzdatetime ”。

 app.directive('customzdatetime', function () { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ngModelCtrl) { element.datetimepicker({ debug: false, format: 'DD-MM-YYYY', maxDate: moment() }).on('dp.change', function (e) { ngModelCtrl.$setViewValue(e.date); scope.$apply(); }); } }; });