AngularJS input [placeholder]指令被ng-model破坏

一尘不染

AngularJS input [placeholder]指令被ng-model破坏

angularjs

因此，第一天使用angularjs进行工作，但我做不到。我正在尝试使用angular指令模仿html5占位符。直到我向该字段添加ng-
model为止，它完全可以工作，然后它仅在用户与该字段进行交互并且破坏该字段具有的任何值之后才可以工作。

在这里编码 http://jsbin.com/esujax/32/edit

指令

App.directive('placehold', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var insert = function() {
        element.val(attrs.placehold);
      };

      element.bind('blur', function(){
        if(element.val() === '')
          insert();
      });

      element.bind('focus', function(){
        if(element.val() === attrs.placehold)
          element.val('');
      });

      if(element.val() === '')
        insert();
    }
  }
});

HTML

<textarea ng-model="comment" placehold="with a model it doesn't work"></textarea>

似乎超级简单，但我迷路了

阅读 733

2020-07-04

共1个答案

一尘不染

您的样本中仅有几处修改：

app.directive('placehold', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {

      var value;

      var placehold = function () {
          element.val(attr.placehold)
      };
      var unplacehold = function () {
          element.val('');
      };

      scope.$watch(attr.ngModel, function (val) {
        value = val || '';
      });

      element.bind('focus', function () {
         if(value == '') unplacehold();
      });

      element.bind('blur', function () {
         if (element.val() == '') placehold();
      });

      ctrl.$formatters.unshift(function (val) {
        if (!val) {
          placehold();
          value = '';
          return attr.placehold;
        }
        return val;
      });
    }
  };
});

您可以在此处进行测试：http :
//plnkr.co/edit/8m54JO?p=preview

不确定它是否是最佳解决方案，无论如何都可以。即使键入相同的文本，也就是占位符属性中的文本，也会导致它检查模型的焦点值。

2020-07-04