Angular从指令内部的输入中删除无效内容 [英] Angular erases invalid content from input inside directive

问题描述

我有要动态添加其他指令和属性的指令:

I have directive where I'm dynamically adding other directives and attributes:

app.directive('lrDatetime', function ($compile) {
return {
  restrict: 'AE',
  require: ["ngModel"],
  scope: {
    ngModel: "=",
    item: "="
  },
  templateUrl: "template.html",
  compile: function compile(element, attrs) {
    var datepicker = element.find(".lr-datepicker");

    if (attrs.required === "true") {
        datepicker.attr("ng-required", "true");
    }

    return {
        pre: function preLink(scope, iElement, iAttrs, controller) { },
        post: function postLink(scope, iElement, iAttrs, controllers) {
            $compile(iElement.contents())(scope);
        }
    };
  },
  controller: function ($scope) {
    $scope.opened = false;
      $scope.open = function ($event, obj, which) {
          $scope.opened = true;
      };

      $scope.format= "dd.MM.yyyy"; 

  }
};
});

和模板:

<input type="text" 
class="lr-datepicker" 
is-open="opened"  
uib-datepicker-popup="{{format}}"
datepicker-append-to-body="true"
ng-model="ngModel" />
<span class="input-group-btn">
    <button type="button" class="btn btn-default" 
    ng-click="open($event, item, 'isOpened')">
        Open
    </button>
</span>

现在，当我绑定了值并尝试在输入中键入内容时，它将被擦除.我知道，如果模型无效，角度将其设置为未定义"，但是如果我在指令外执行相同的操作，它将保留输入的内容.

Now when I have value binded and trying to type something into input it gets erased. I know that if model is invalid angular sets it to "undefined", but if I would do the same outside the directive it keeps the content of the input.

如果我只是将这些属性移至模板并删除对$ compile的调用-一切都会按预期进行.但是这种方法的最大缺点是我无法控制属性的外观，它总是会被渲染.

And if I will just move those attributes to template and delete call to $compile - everything work as expected. But huge minus of such approach is that I cannot control attribute appearance, it always will be rendered.

我想念什么?

柱塞

推荐答案

找到了解决方案-ngModel属性应在$ compile之前的链接函数中手动添加:

Found the solution - ngModel attribute should be added manually in link function before $compile:

app.directive('lrDatetime', function ($compile) {
    return {
      restrict: 'AE',
      require: ["ngModel", "^form"],
      scope: {
        ngModel: "=",
        item: "=",
        required: "=",
        name: "@"
      },
      templateUrl: "template.html",
      link: function (scope, element, attrs, controllers) { 
        scope.itemForm = controllers[1];

        scope.opened = false;
        scope.open = function ($event, obj, which) { 
            scope.opened = true;
        };

        scope.format= "dd.MM.yyyy"; 

        var datepicker = element.find("input");

        if (scope.required === true) {
            datepicker.attr("ng-required", "true");
        }

        datepicker.attr("name", scope.name);
        datepicker.attr("ng-model", "ngModel");
        datepicker.attr("uib-datepicker-popup", scope.format);

        $compile(element.contents())(scope);

     }
  };
});

模板:

<input type="text" 
class="lr-datepicker" 
is-open="opened"  
datepicker-append-to-body="true" />    
<span class="input-group-btn">
    <button type="button" class="btn btn-default" 
    ng-click="open($event, item, 'isOpened')">
        Open
    </button>
</span>
<span ng-if="itemForm[name].$error.required">required!</span>

柱塞

认为出现此问题是因为模板被编译了两次，并且模型被重新绑定了.

Think the issue pops up because template gets compiled twice and model gets rerebinded.

这篇关于Angular从指令内部的输入中删除无效内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！