Angularjs输入[占位符]指令与NG-模型破(Angularjs input[placehol

因此，首先与angularjs工作一天，我不太得到它。 我试图模仿使用角指令的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属性，导致它会检查该模型的焦点价值。

Answer 2:

您也可以检出，实现了老版浏览器的“占位符”属性的Angular.JS模块：

https://github.com/urish/angular-placeholder-shim

Answer 3:

我创建了可以采取angularjs表达，也隐藏输入占位符文本占位符指令。 你可以阅读有关在占位符http://blog.f1circle.com/2013/09/supporting-placeholders-in-non-html5.html

这里是要点。

(function(angular, app) {
  "use strict";
  app.directive('placeholder',["$document", "$timeout", function($document, $timeout){
    var link = function(scope,element,attrs,ctrl){

      // if you dont use modernizr library use the solution given at
      // http://stackoverflow.com/questions/5536236/javascript-check-for-native-placeholder-support-in-ie8
      // to check if placeholder is supported natively
      if(Modernizr.input.placeholder){
        return;
      }

      /*
        The following keys all cause the caret to jump to the end of the input value
        27,  Escape
        33,  Page up
        34,  Page down
        35,  End
        36,  Home
        Arrow keys allow you to move the caret manually, which should be prevented when the placeholder is visible
        37,  Left
        38,  Up
        39,  Right
        40,  Down
        The following keys allow you to modify the placeholder text by removing characters, which should be prevented when the placeholder is visible
        8,  Backspace
        46  Delete
      */

      var pTxt, modelValue, placeholding = false, badKeys = [27,33,34,35,36,37,38,39,40,8,46];

      var unplacehold = function(){
        if(!placeholding){
          return;
        }
        placeholding = false;
        element.removeClass('placeholder');
        element.val('');
      };

      var placehold = function(){
        if(placeholding || modelValue){
          return;
        }
        placeholding = true;
        element.addClass('placeholder');
        element.val(pTxt);
      };

      var moveCaret = function(elem, index) {
        var range;
        if (elem.createTextRange) {
          range = elem.createTextRange();
          range.move("character", index);
          range.select();
        } else if (elem.selectionStart) {
          elem.focus();
          elem.setSelectionRange(index, index);
        }
      };

      attrs.$observe('placeholder',function(value){
        pTxt = value;
        placeholding = false;
        placehold();
      });

      ctrl.$parsers.unshift(function (value){
        modelValue = value;
        if(!value){
          placehold();
        }
        if(placeholding){
          return '';
        }
        return value;
      });

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

      element.on('click focus contextmenu',function(event){
        if($document[0].activeElement  !== this){
          return;
        }

        if(!modelValue){
          moveCaret(this,0);
        }
      });

      element.on('blur',function(){
        placehold();
      });

      element.on('keydown',function(e){
        if(!placeholding){
          return;
        }
        if(_.contains(badKeys,e.keyCode)){
          if(e.preventDefault){
            e.preventDefault();
          }
          return false;
        }
        unplacehold();
      });

      element.on('keyup',function(e){
        if(modelValue){
          return;
        }
        placehold();
        moveCaret(this,0);
      });

      element.on('paste',function(e){
        $timeout(function(){
          modelValue = element.val();
        },0);

      });
    };

    return{
      restrict: 'A',
      require: 'ngModel',
      link : link,
      priority:3,
    };
  }]);
})(angular, app);

这适用于所有的情况下，除非复制和粘贴相同的占位符文本。

文章来源: Angularjs input[placeholder] directive breaking with ng-model