为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

摇曳的蔷薇 2019-10-12 10:14:59
我正在创建简单的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吗?如果不可能,哪种解决方案更适合创建此类组件?
查看完整描述

3 回答

?
BIG阳

TA贡献1859条经验 获得超6个赞

使您的指令以比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保持不变的参数(可以选择)修改这两个属性。


查看完整回答
反对 回复 2019-10-12
  • 3 回答
  • 0 关注
  • 625 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信