如何在 Angular 指令的 Link 函数中设置 CSS 样式

Posted 2023-03-05

【中文标题】如何在 Angular 指令的 Link 函数中设置 CSS 样式

【英文标题】：How to set CSS styles within Link function of Angular directive

【发布时间】：2015-09-17 11:19:41

【问题描述】：

我试图在单击自定义 Angular 指令时在某个类上设置 CSS 样式。我想在 Link 函数中完成这个（以及任何其他 DOM 操作）。 以下是我目前所拥有的，但我收到了 address.on is not a function 错误。单击blur 类元素时，如何在blur 类上正确设置CSS -webkit-filter: none？

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

【参考方案1】：

address 是一个 DOM 元素。您需要将其包装在 angular.element 中以将其转换为 jqLit​​e 对象：

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