I'm attempting to set CSS styles on a certain class within a custom Angular directive when it is clicked. I want to acplish this (and any other DOM manipulation) within the Link function. Below is what I have so far, but I'm getting an address.on is not a function error. How would I properly set the CSS -webkit-filter: none on the blur class when blur class elements are clicked?

function link(scope, element, attributes) {
  var address = element[0].getElementsByClassName('blur');
  address.on('click', function() {
    address.css({'-webkit-filter': 'none'});
  });
}

I'm attempting to set CSS styles on a certain class within a custom Angular directive when it is clicked. I want to acplish this (and any other DOM manipulation) within the Link function. Below is what I have so far, but I'm getting an address.on is not a function error. How would I properly set the CSS -webkit-filter: none on the blur class when blur class elements are clicked?

function link(scope, element, attributes) {
  var address = element[0].getElementsByClassName('blur');
  address.on('click', function() {
    address.css({'-webkit-filter': 'none'});
  });
}

• javascript
• html
• angularjs
• dom

1 Answer 1

address is a DOM element. You need to wrap it in angular.element to turn it into a jqLite object:

function link(scope, element, attributes) {
  var address = angular.element(element[0].getElementsByClassName('blur'));
  address.on('click', function() {
    address.css({'-webkit-filter': 'none'});
  });
}