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 */ }

原文地址：https://www.jb51.cc/angularjs/149810.html