角度绑定事件

Question

我正在努力做到这一点。使用指令。我的想法是用焦点和模糊绑定事件。 但模糊的问题是它会在输入模糊后立即更改图标。

我希望检查项目在模糊后仍然存在。如果它有数据。

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

您的问题似乎与模糊事件有关，正如@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类。

换句话说，这是正确的角度方式。