javascript – Angularjs输入[placeholder]指令用ng模型打破

前端之家收集整理的这篇文章主要介绍了javascript – Angularjs输入[placeholder]指令用ng模型打破前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以第一天的工作与 angularjs,我没有得到它.我试图使用角度指令来模拟一个html5占位符.它完全有效,直到我添加一个ng模型到字段,然后它只有在用户与字段进行交互后才能工作,并且还会破坏该字段的任何值.

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

指令

  1. App.directive('placehold',function(){
  2. return {
  3. restrict: 'A',link: function(scope,element,attrs) {
  4. var insert = function() {
  5. element.val(attrs.placehold);
  6. };
  7.  
  8. element.bind('blur',function(){
  9. if(element.val() === '')
  10. insert();
  11. });
  12.  
  13. element.bind('focus',function(){
  14. if(element.val() === attrs.placehold)
  15. element.val('');
  16. });
  17.  
  18. if(element.val() === '')
  19. insert();
  20. }
  21. }
  22. });

html

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

似乎超简单,但我迷失了

解决方法

您的示例中几个修改
  1. app.directive('placehold',function() {
  2. return {
  3. restrict: 'A',require: 'ngModel',attr,ctrl) {
  4.  
  5. var value;
  6.  
  7. var placehold = function () {
  8. element.val(attr.placehold)
  9. };
  10. var unplacehold = function () {
  11. element.val('');
  12. };
  13.  
  14. scope.$watch(attr.ngModel,function (val) {
  15. value = val || '';
  16. });
  17.  
  18. element.bind('focus',function () {
  19. if(value == '') unplacehold();
  20. });
  21.  
  22. element.bind('blur',function () {
  23. if (element.val() == '') placehold();
  24. });
  25.  
  26. ctrl.$formatters.unshift(function (val) {
  27. if (!val) {
  28. placehold();
  29. value = '';
  30. return attr.placehold;
  31. }
  32. return val;
  33. });
  34. }
  35. };
  36. });

你可以在这里测试:http://plnkr.co/edit/8m54JO?p=preview

不确定,这是最好的解决方案,无论如何它的作品.即使您输入相同的文字,您也可以使用您的placehold属性,因此它会检查模型的焦点值.

猜你在找的JavaScript相关文章