angularjs自定义指令的样式如何设置

翻译自这里写链接内容

http://stackoverflow.com/questions/19577027/how-to-css-style-angular-directive

问题

（下面这是一种不好的指令使用方式”C”）

假设你有一个自定义指令如下，并且有许多需要设置的样式

<div class="mydirect">
<div class="classA">
<div class="subclassA">
<div class="subclassB">
</div>
<div class="classB"></div>
</div>

这些样式保存在”mydirectstyle.css”文件中，指令的定义如下

I noticed that despite having the classnames in a css file ("mydirectstyle.css") and it being included in index.html, using my directive:

angular.module("MyApp", []).
directive('mydirect', function() {
return {
restrict: 'E',
replace: true,
template: '-All that Html here-'
};
});

然而这样做并没有效果，index.html中，该指令并无想要的在模板中定义的样式

**译者注：

The restrict option is typically set to:

‘A’ - only matches attribute name 标签属性

‘E’ - only matches element name 元素标签

‘C’ - only matches class name 样式class，不推荐，容易与css混淆

‘M’ - only matches comment 注释**

解答

用“E”的形势要方便很多，原因如下：1. vs
可读性好； 2.你可以通过标签名很容易的设置css样式

指令还是这么写

.directive('mydirect', function() {
return {
restrict: 'EA',
replace: true,
template: '-All that Html here-'
};
});

样式设置如下

Example 1:

HTML:

<mydirect></mydirect>
CSS:

mydirect{ /* Styles go here */ }
Example 2:

HTML:

<div mydirect></div>
CSS:

div[mydirect]{ /* Styles go here */ }
Example 3:

HTML:

<div data-mydirect></div>
CSS:

/* Leaving off the 'div' in this example allows the same
styles to apply to any element with the data-direct attribute,
regardless of its tag type */

[data-mydirect]{ /* Styles go here */ }