AngularJS - Binding element to blur not triggered

Question

I have a simple directive

app.directive('cell', function() 
{
    return {
        restrict: 'C',
        link: function(scope, element, attrs)
        {
            element.bind('click', function()
            {
                element.addClass('selected');
            });

            element.bind('blur', function()
            {
                console.log('blur');
                element.removeClass('selected');
            });
        }
    }
});

And my cell is

<div class="shift">
    <div class="cell" ng-repeat="cell in cells"></div>
</div>

The click binds fine, but the blur doesn't. It is never triggered!

Are you omitting your cell contents? Blur only fires when a control has focus and loses it to another control. If you can't use TAB to get to the control, it can't gain focus and there will be no blur event. Usually only input type controls and buttons can get focus. — Jason Goemaat
– Jason Goemaat, Commented Jul 20, 2014 at 19:35
Okay okay, thanks! So is there a way to fire something up when you click anywhere outside of that element? That is without using $document cause that will just create an infinite number of events~ — Kousha
– Kousha, Commented Jul 20, 2014 at 19:36
You can use mouseleave to detect when the mouse moves out of the element, but you'd have to register a click handler on the document and trigger the change when you detect a click that is not over that element. What are you trying to do? There may be a better way. Off the top of my head I would think you could maintain a 'selectedCell' property on your scope and the ng-click on your div would just be ng-click="selectedCell = cell". Then on your div ng-class="{selected : cell == selectedCell}" — Jason Goemaat
– Jason Goemaat, Commented Jul 20, 2014 at 19:43
Do you need to set selected class when user click on element itself, or when user set focus on any input in cell? — IUnknown
– IUnknown, Commented Jul 20, 2014 at 19:45
This is suppose to be like an excel type cell. So upon clicking, I want to select the cell (just adding border). And when you click anywhere else (could be another cell, or somewhere else), I want to deselect the cell and remove the border — Kousha
– Kousha, Commented Jul 20, 2014 at 19:46

gkalpak · Accepted Answer · 2015-05-21 19:22:36Z

3

Just because you click on a div, it doesn't mean it gets keyboard focus. And if it doesn't get keyboard focus (as it is not editable), it can't lose it and thus can't blur.

An alternative approach could be the following:
Upon clicking on any .cell element, remove the selected class from every element that has it and then add it to the clicked element.

E.g.:

.directive('cell', function cellDirective($window) {
  return {
    restrict: 'C',
    link: function cellPostLink(scope, elem, attrs) {
      elem.on('click', onClick);
      scope.$on('$destroy', onDestroy);

      function onClick() {
        Array.prototype.forEach.call(
            $window.document.querySelectorAll('.selected'),
            function (el) { angular.element(el).removeClass('selected'); });
        elem.addClass('selected');
      }

      function onDestroy() {
        elem.off('click', onClick);
      });
    }
  };
});

See, also, this short demo.

NOTES:

Depending on the browsers you are supporting and on whether you are using jQuery or not the code above might need modifications.
An alternative approach would be to register a click-listener on the document and remove the selected class from any element if the clicked element was a .cell. In that case, you need to take care to only register the listener once and not for every instance of .cell.
It is a good practise to always clean-up your listeners upon scope's destruction, in order to prevent memory leaks. You can use scope.$on('$destroy', callback) to remove any event listeners registered on elements.

edited May 21, 2015 at 19:22

answered Jul 20, 2014 at 19:52

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

1 Comment

Kousha Over a year ago

I was doing this originally. but the problem is that if I click on a cell, and then click somewhere else (i.e. not another cell), then the cell will not be deselected. And I want it to be deselected.

IUnknown · Accepted Answer · 2014-07-20 20:01:21Z

0

You can handle chidlren focus and blur events in directive:

element.children().bind('focus', function() {
  element.addClass('selected');
});

element.children().bind('blur', function() {
  console.log('blur');
  element.removeClass('selected');
});

answered Jul 20, 2014 at 20:01

IUnknown

22.5k4 gold badges41 silver badges71 bronze badges

Collectives™ on Stack Overflow

AngularJS - Binding element to blur not triggered

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related