Angular binding event

Question

I am trying to do something this this. Using a directive.The idea I have is to bind the event with focus and blur. But the problem with blur is that it changes the icon just after the input is blured.

I want the check item to persist even after blur.If it has the data.

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

try to not modify the DOM inside angular (unless you are compiling html) take a look at docs.angularjs.org/api/ng/directive/ngClass — Isaac
– Isaac, Commented Aug 12, 2016 at 7:29

Dinesh Shah · Accepted Answer · 2016-08-12 07:36:31Z

1

just modify your directive blur event method as given below.

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

answered Aug 12, 2016 at 7:36

Dinesh Shah

1,2331 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

illeb · Accepted Answer · 2016-08-12 08:44:41Z

Your problem seems related to the blur event, as @Dinesh Shah has suggested: you can easily fix it by using the code he posted.

But i strongly suggest you to create a directive that handles your input, as shown in this example.

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

Like this, you'll be able to handle inputs in a easier way. Also, you should be using ng-class instead of relying on javascript/jquery to toggle css classes.

In other words, this the correct angular way of things.

Collectives™ on Stack Overflow

Angular binding event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related