javascript - Angular 绑定(bind)事件

Question

我正在尝试做这件事。使用指令。我的想法是将事件与焦点和模糊绑定(bind)。但是模糊的问题在于它会在输入模糊后立即更改图标。

我希望检查元素即使在模糊之后仍然存在。如果它有数据。

plunker

html

<div>
<span class="delete-tag"><i class="fa fa-tags"></i></span>

<input type="text" placeholder="enter label name" class="label-input" my-change>

<span class="span-right"><i class="fa fa-pencil"></i></span></div>

<div>
<span class="delete-tag"><i class="fa fa-tags"></i></span>
<input type="text" placeholder="enter label name" class="label-input" my-change>
<span class="span-right"><i class="fa fa-pencil"></i></span>

</div>

JavaScript

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
});
app.directive('myChange', function() {
return function(scope, element) {
element.bind('focus', function() {
  console.log(element);
   element[0].previousElementSibling.firstChild.className = 'fa fa-trash';
   element[0].nextElementSibling.firstChild.className = 'fa fa-check';
});
element.bind('blur', function() {
   element[0].previousElementSibling.firstChild.className = 'fa fa-tags';
   element[0].nextElementSibling.firstChild.className = 'fa fa-pencil';
});
};
 });

Answer 1

只需修改您的指令模糊事件方法，如下所示。

 element.bind('blur', function() {
  if(element[0].value.length == 0)
  {
   element[0].previousElementSibling.firstChild.className = 'fa fa-tags';
   element[0].nextElementSibling.firstChild.className = 'fa fa-pencil';
  } 
});