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 */ }
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值