angularjs之我可以在隔离范围内使用ng-model吗

我正在创建简单的ui-datetime指令。它将javascript日期对象分为_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(); 
} 

jsfiddle

在github上: https://github.com/andreev-artem/angular_experiments/tree/master/ui-datetime

据我了解-创建新组件的最佳实践是使用隔离范围。

当我尝试使用隔离范围时，没有任何效果。 ngModel。$ viewValue ===未定义。

当我尝试使用新范围时(我的示例，不是那么好的变种imho)-ngModel在新创建的范围上使用值。

当然，我可以创建具有隔离范围的指令，并通过“= expression”( example)使用ngModel值。但是我认为使用ngModelController是更好的做法。

我的问题:

我可以在隔离范围内使用ngModelController吗？

如果不可能创建该组件的解决方案更好？

请您参考如下方法:

在您的第一个 fiddle 中用scope: true替换scope: { datetime1: '=ngModel'}似乎很好-fiddle。不幸的是，指向“示例” fiddle 的链接已断开，因此我不确定您在此处尝试了什么。

因此，似乎ngModelController可以与独立作用域一起使用。

这是一个较小的 fiddle ，在HTML / view中使用ng-model，具有隔离范围，在链接函数中使用$ setViewValue:fiddle。

更新:我刚刚发现了一个很有趣的东西:如果隔离范围属性被赋予了不同的名称-例如，说dt1而不是datetime1-scope: { dt1: '=ngModel'}-它不再起作用!我猜想当我们require: 'ngModel'时，ngModelController使用HTML / view中的名称(即ng-model属性值)在隔离范围上创建一个属性。因此，如果我们在对象哈希中指定相同的名称，那么一切都很好。但是，如果我们指定其他名称，则新的范围属性(例如dt1)不会与所需的ngModelController关联。

这是一个updated fiddle。