[英]Bootstrap 3 DateTimePicker - binding to angular model doesn't work after 'dp.change'
我正在嘗試使用eonasdan
Bootstrap 3 DateTimePicker
。 一切正常,但是我遇到了將輸入中的實際日期綁定到Angular ng-model的問題。 當我使用選擇器更改數據時,“ dp.change”事件正在運行,輸入中的日期正在更改,但是我必須按空格鍵或任何其他鍵才能進行ng模型更新檢測。
一些安全的代碼:
帶角指令的JS:
(function () {
'use strict';
var module = angular.module('feedApp');
module.directive('datetimepicker', [
'$timeout',
function ($timeout) {
return {
require: '?ngModel',
restrict: 'EA',
scope: {
options: '@',
onChange: '&',
onClick: '&'
},
link: function ($scope, $element, $attrs, controller) {
$($element).on('dp.change', function () {
//alert("change");
$timeout(function () {
var dtp = $element.data('DateTimePicker');
controller.$setViewValue(dtp.date());
$scope.onChange();
});
});
$($element).on('click', function () {
$scope.onClick();
});
controller.$render = function () {
if (!!controller) {
if (controller.$viewValue === undefined) {
controller.$viewValue = null;
}
else if (!(controller.$viewValue instanceof moment)) {
controller.$viewValue = moment(controller.$viewValue);
}
$($element).data('DateTimePicker').date(controller.$viewValue);
}
};
$($element).datetimepicker($scope.$eval($attrs.options));
}
};
}
]);
})();
HTML:
<div style="max-width: 250px">
<div class="input-group input-group-sm date">
<input type="text" class="form-control" options="{format:'DD.MM.YYYY HH:mm', locale:'pl'}" datetimepicker ng-model="feed.reminderDateTime" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
任何想法如何解決這個問題? 我會很感激。
回來時遇到了類似的問題。 沒有參考的源代碼,但我確實記得它是類似的東西。
因為您的ng-model是ng-model="feed.reminderDateTime"
在您的控制器中,您應該這樣做$scope.feed = {reminderDateTime:''};
然后,您應該可以通過$scope.feed.reminderDateTime
訪問它
讓我知道怎么回事
要求('datetimepicker');
Vue.directive('datetimepicker', {
twoWay: true, //very important to bind the modeldata
bind: function () {
$(this.el).datetimepicker({
format: 'YYYY/MM/DD', //see moment for more valid date time formats
useCurrent: false
}).on('dp.change', function (value) {
//todo: do the required changed to the value here
});
},
update: function (value) {
$(this.el).val(value).trigger('dp.change');
},
unbind: function () {
$(this.el).off().datetimepicker('destroy');
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.