Я создаю простую директиву ui -datetime. Он разбивает объект Date javascript на _даты, _часов и _минут. _date использует jquery ui datepicker, _часы и _минуты -числовые входы.
angular.module("ExperimentsModule", [])
.directive("uiDatetime", function () {
return {
restrict: 'EA',
replace: true,
template: '' +
'' +
'' +
'' +
'
Child datetime1: {{datetime1}}' +
'',
require: 'ngModel',
scope: true,
link: function (scope, element, attrs, ngModelCtrl) {
var elDate = element.find('input.date');
ngModelCtrl.$render = function () {
var date = new Date(ngModelCtrl.$viewValue);
var fillNull = function (num) {
if (num < 10) return '0' + num;
return num;
};
scope._date = fillNull(date.getDate()) + '.' + fillNull(date.getMonth() + 1) + '.' + date.getFullYear();
scope._hours = date.getHours();
scope._minutes = date.getMinutes();
};
elDate.datepicker({
dateFormat: 'dd.mm.yy',
onSelect: function (value, picker) {
scope._date = value;
scope.$apply();
}
});
var watchExpr = function () {
var res = scope.$eval('_date').split('.');
if (res.length == 3) return new Date(res[2], res[1] - 1, res[0], scope.$eval('_hours'), scope.$eval('_minutes'));
return 0;
};
scope.$watch(watchExpr, function (newValue) {
ngModelCtrl.$setViewValue(newValue);
}, true);
}
};
});
function TestController($scope) {
$scope.datetime1 = new Date();
}
На гитхабе:https://github.com/andreev-artem/angular_experiments/tree/master/ui-datetime
Насколько я понимаю -, при создании нового компонента рекомендуется использовать изолированную область.
Когда я пытался использовать изолированную область -, ничего не работало. ngModel.$viewValue === не определено.
Когда я пытался использовать новый прицел (мой пример, не очень хороший вариант имхо)-ngModel использует значение во вновь созданной области.
Конечно, я могу создать директиву с изолированной областью действия и работать со значением ngModel через "=expression"(пример).Но я думаю, что лучше работать с ngModelController.
Мои вопросы: