我正在创建简单的ui-datetime指令。它将JavaScript Date对象分成_date，_hours和_minutes部分。 _date使用jquery ui datepicker，_hours和_minutes – 数字输入。
angular.module("ExperimentsModule",[])
.directive("uiDatetime",function () {
return {
restrict: 'EA',replace: true,template: '<div class="ui-datetime">' +
'<input type="text" ng-model="_date" class="date">' +
'<input type="number" ng-model="_hours" min="0" max="23" class="hours">' +
'<input type="number" ng-model="_minutes" min="0" max="59" class="minutes">' +
'<br />Child datetime1: {{datetime1}}' +
'</div>',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();
}
关于github：https://github.com/andreev-artem/angular_experiments/tree/master/ui-datetime
据我所知 – 创建新组件时的最佳做法是使用隔离镜像。
当我试图使用孤立的范围 – 没有什么工作。 ngModel。$ viewValue === undefined。
当我尝试使用新的范围(我的例子，不是很好的变体imho) – ngModel在新创建的范围上使用值。
当然，我可以通过“= expression”(example)创建具有孤立范围的指令并使用ngModel值。但是我认为使用ngModelController是一个更好的做法。
我的问题：
>我可以使用带隔离镜像的ngModelController吗？
>如果不可能有哪些解决方案更好地用于创建这样的组件？
替换范围：范围：您的第一个小提琴中的{datetime1：’= ngModel’}似乎工作正常 –
fiddle.不幸的是，链接到您的“示例”小提琴坏了，所以我不知道你在那里尝试。
原文链接：https://www.f2er.com/angularjs/144819.html所以，看起来ngModelController可以和隔离范围一起使用。
这是一个较小的小提琴，它在HTML /视图中使用ng-model，一个隔离范围和$ setViewValue在链接功能：fiddle中。
更新：我刚刚发现一些相当有趣的东西：如果隔离范围属性被赋予不同的名称 – 例如，说dt1而不是datetime1 – 范围：{dt1：’= ngModel’} – 它不再有效！我猜测当我们要求：’ngModel’时，ngModelController使用HTML /视图中的名称(即ng模型属性值)在隔离范围上创建一个属性。所以如果我们在对象散列中指定相同的名称，一切都很好。但是，如果我们指定了一个不同的名称，那么新的scope属性(例如，dt1)不与我们需要的ngModelController相关联。
这是一个updated fiddle。
