我可以在隔离范围内使用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();

                }

            });

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

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

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

当我尝试使用新范围时（我的示例，不是很好的变体imho）-ngModel在新创建的范围上使用值。

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

我的问题：

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

如果不可能，哪种解决方案更适合创建此类组件？

Answer 1

使您的指令以比ngModel更高的优先级运行，并为孤立的作用域更正模型绑定。在高优先级模板操作（例如ngRepeat）之后，但在默认值0（ngModel使用的默认值）之后，我选择了与输入指令相同级别的优先级“ 100”。这是示例代码：myDirective = function() {&nbsp; return {&nbsp; &nbsp; compile: function(tElement, tAttrs, transclude) {&nbsp; &nbsp; &nbsp; // Correct ngModel for isolate scope&nbsp; &nbsp; &nbsp; if (tAttrs.ngModel) {&nbsp; &nbsp; &nbsp; &nbsp; tAttrs.$set('model', tAttrs.ngModel, false);&nbsp; &nbsp; &nbsp; &nbsp; tAttrs.$set('ngModel', 'model', false);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; post: function(scope, iElement, iAttrs, controller) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Optionally hook up formatters and parsers&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; controller.$formatters.push(function(value) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Render&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return controller.$render = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!controller.$viewValue) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; angular.extend(scope, controller.$viewValue);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; },&nbsp; &nbsp; priority: 100,&nbsp; &nbsp; require: '^ngModel',&nbsp; &nbsp; scope: {&nbsp; &nbsp; &nbsp; model: '='&nbsp; &nbsp; },&nbsp; };}在编译期间，伪指令检查ngModel属性是否存在。该检查使用Angular的Attributes对归一化值进行处理。如果存在该属性，则将其替换为“ model”（不是“ ngModel”），这是数据绑定到我们隔离区中的名称。但是，我们还必须创建一个属性，以便Angular可以为我们执行数据绑定。可以使用一个false使DOM保持不变的参数（可以选择）修改这两个属性。