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中解决这个问题，并且当cursor: pointer指令与锚点关联时也应用popup-help。

我可以重新定义整个锚：

a {
  cursor: pointer;
}

...但我希望收紧定义，只适用于我真正改变的内容。

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

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

Answer 1

只需在元素中添加一个类并按照这种方式设置样式。是否将您的指令用作属性或元素并不重要。

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

.foo {
  border: 1px solid black;
}

Answer 2

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

elem.addClass('foo')

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

如果你真的不想求助于你可以做的课程：

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

或

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

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

2 个答案: