javascript - How to set CSS styles within Link function of Angular directive - Stack Overflow

admin管理员组

文章数量:1332969

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

Share Improve this question Follow asked Jun 30, 2015 at 15:09 MattDionisMattDionis 3,6161010 gold badges5555 silver badges110110 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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

本文标签： javascriptHow to set CSS styles within Link function of Angular directiveStack Overflow