Is there a way to write an angular directive (or something angular-y) to affect all input or textarea?

Question

I'm looking to effect the blur on all of the textareas and input elements on a page. The idea is that when these element's are blurred from I can easily adjust other areas on the page. What comes to mind is event delegation like jQuery live() or on(). However, I don't want to include the full jQuery library, and I don't think that the jQuery lite version supports live() and on() is included, but I'm not seeing blur bubble up to the body so internally propagation might be squelched to input and text areas since they are actually angular directives under the hood.

Is there a way to handle global events for elements, like blur on inputs and textareas?

Answer 1

You could write a directive like so:

app.directive('textarea', function() {
  return {
    restrict: 'E',
    link: function(scope, elem, attrs) {
      elem.blur(function() {
        // Things are getting blurry!.. seriously though, execute blur logic here
      });
    }
  };
});

You could also add one for inputs and then condense your blur logic into a service.