将 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>

浏览器不会为锚标签提供 cursor: pointer 样式，除非它们具有与之关联的 href。我想在我的 CSS 中解决这个问题，并且在 popup-help 指令与锚关联时应用 cursor: pointer。

我可以重新定义整个锚点：

a {
  cursor: pointer;
}

...但我更愿意收紧定义以仅适用于我真正改变的内容。

我也可以将指令重新定义为一个完整的元素，但出于代码样式的原因，我也想避免这种情况。

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

Answer 1

只需在您的元素中添加一个 class 并设置样式即可。您的指令是否用作属性或元素并不重要。

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

.foo {
  border: 1px solid black;
}

Answer 2

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

elem.addClass('foo')

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

如果您真的不想求助于 classes，您可以这样做：

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

或

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

将 CSS 应用于 AngularJS 指令元素标记

Apply CSS to AngularJS Directive Element Tag

html

css

directive

angularjs