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

Question

我正在创建简单的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吗？

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

Answer 1

在您的第一个 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。