html - 将 CSS 应用到 AngularJS 指令元素标签

Question

我可以将 CSS 样式应用到已定义为元素标签的 AngularJS 指令吗？

我有以下简单指令:

app.directive('popupHelp', function ($window) {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs, ctrl) {
      elem.bind('click', function (e) {
        $window.open('http://www.google.com', 'popupHelpWindow', 'width=500,height=500');
        console.log("I'm going to get you help on: " + attrs.popupHelp);
      });

      // cleanup
      scope.$on('$destroy', function () {
        elem.unbind('click');
      });
    }
  }
});

我用以下内容调用:

<a popup-help="csshelp">GET ME HELP!</a>

浏览器不会为 anchor 标记提供 cursor:pointer 样式，除非它们有一个 href 与之关联。我想在 CSS 中修复此问题，并在 popup-help 指令与 anchor 关联时应用 cursor:pointer。

我可以重新定义整个 anchor :

a {
  cursor: pointer;
}

...但我更愿意收紧定义，使其仅适用于我真正要更改的内容。

我还可以将指令重新定义为完整元素，但出于代码样式原因我也想避免这样做。

我可以创建一个捕获指令属性的 CSS 定义吗？

Answer 1

如果您不想在 HTML 标记中定义类，也可以使用

elem.addClass('foo')

在指令本身中定义一个类。

---

如果你真的不想参加类(class)，你可以这样做:

elem.css('cursor','pointer');

或

elem.attr('style','cursor: pointer');