Can I use ng-model with isolated scope?
angularjs
Solution
Replacing `scope: true` with `scope: { datetime1: '=ngModel'}` in your first fiddle seems to work fine -- fiddle. Unfortunately, the link to your "example" fiddle is broken, so I'm not sure what you tried there.
So, it would seem that ngModelController can be used with an isolate scope.
Here's a smaller fiddle that uses ng-model in the HTML/view, an isolate scope, and $setViewValue in the link function: fiddle.
Update: I just discovered something rather interesting: if the isolate scope property is given a different name -- e.g., say dt1 instead of datetime1 -- `scope: { dt1: '=ngModel'}` -- it no longer works! I'm guessing that when we `require: 'ngModel'`, the ngModelController uses the name in the HTML/view (i.e., the ng-model attribute value) to create a property on the isolate scope. So if we specify the same name in the object hash, all is well. But if we specify a different name, that new scope property (e.g., dt1) is not associated with the ngModelController we required.
Here's an updated fiddle.
Problem
I am creating simple ui-datetime directive. It splits javascript Date object into _date, _hours and _minutes parts. _date uses jquery ui datepicker, _hours and _minutes - number inputs. ``` 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(); } ``` jsfiddle On github: https://github.com/andreev-artem/angular_experiments/tree/master/ui-datetime As far as I understand - best practice when you create a new component is to use isolated scope. When I tried to use isolated scope - nothing works. ngModel.$viewValue === undefined. When I tried to use new scope (my example, not so good variant imho) - ngModel uses value on newly created scope. Of course I can create directive with isolated scope and work with ngModel value through "=expression" (example). But I think that working with ngModelController is a better practice. My questions: - Can I use ngModelController with isolated scope? - If it is not possible which solution is better for creating such component?