Angularjs使用ng-model输入[placeholder]指令

Question

因此,第一天使用angularjs工作,我不太了解它.我正在尝试使用angular指令模仿html5占位符.它完全有效,直到我向场中添加ng模型,然后它只在用户与字段交互后才能工作,并且还会破坏字段的任何值.

在这里编码 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>

---

看起来很简单,但我迷路了

Answer 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

不确定,它是最好的解决方案,无论如何它都有效.即使您在placehold属性中键入了相同的文本,也要检查模型在焦点上的值.