所以第一天的工作与
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>
似乎超简单,但我迷失了
解决方法
您的示例中几个修改:
- app.directive('placehold',function() {
- return {
- restrict: 'A',require: 'ngModel',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属性,因此它会检查模型的焦点值.