javascript - Angularjs input[placeholder] 指令与 ng-model 中断

Question

所以第一天开始使用 angularjs，我不太明白。我正在尝试使用 Angular Directive(指令)模仿 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>

---

看起来 super 简单，但我迷路了

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

不确定，这是最好的解决方案，但它确实有效。即使您键入与占位符属性中相同的文本，它也会检查模型的焦点值。