角度绑定事件

Question

​

​

我正在尝试做一些这样的事情。使用directive.The的想法是将事件与焦点和模糊绑定在一起。但模糊的问题是，它会在输入模糊后立即更改图标。

我希望检查项即使在blur.If之后仍然存在，因为它有数据。

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';
  } 
});

Answer 2

你的问题似乎与blur事件有关，正如@Dinesh Shah所建议的:你可以通过使用他发布的代码轻松地修复它。

但是我强烈建议你创建一个指令来处理你的输入，如this 所示。

app.directive('inputBox', function() {
  return {
    restrict: 'E',
    scope : {
      value : '='
    },
    template: '<div><span class="delete-tag"><i class="fa fa-tags" ng-class="leftClass"></i></span>' + 
      '<input type="text" placeholder="enter label name" class="label-input" ng-model="value">' +
      '<span class="span-right" ng-class="rightClass"><i class="fa fa-pencil"></i></span>' +
      '</div>',
    link: function(scope, element, attrs, ctrl){

      //you could ng-focus/ng-blur here
      var input = element.children().children().eq(1);

      input.bind('focus', function() {
         scope.leftClass = 'fa fa-trash';
         rightClass = 'fa fa-check';
      });
      input.bind('blur', function() {
         if(!scope.value.length)
         {
           scope.leftClass = 'fa fa-tags';
           scope.rightClass = 'fa fa-pencil';
        }
       });
    }
  }
});

这样，您将能够以一种更容易的方式处理输入。此外，您应该使用ng-class而不是依赖javascript/jquery来切换css类。

换句话说，这是事物的正确角度。