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

  return {

    compile: function(tElement, tAttrs, transclude) {

      // Correct ngModel for isolate scope

      if (tAttrs.ngModel) {

        tAttrs.$set('model', tAttrs.ngModel, false);

        tAttrs.$set('ngModel', 'model', false);

      }

      return {

        post: function(scope, iElement, iAttrs, controller) {

          // Optionally hook up formatters and parsers

          controller.$formatters.push(function(value) {

             // ...

          })

          // Render

          return controller.$render = function() {

            if (!controller.$viewValue) {

              return;

            }

            angular.extend(scope, controller.$viewValue);

          };

        }

      };

    },

    priority: 100,

    require: '^ngModel',

    scope: {

      model: '='

    },

  };

}

在编译期间，伪指令检查ngModel属性是否存在。该检查使用Angular的Attributes对归一化值进行处理。如果存在该属性，则将其替换为“ model”（不是“ ngModel”），这是数据绑定到我们隔离区中的名称。但是，我们还必须创建一个属性，以便Angular可以为我们执行数据绑定。可以使用一个false使DOM保持不变的参数（可以选择）修改这两个属性。