angularjs自定义指令的样式如何设置
翻译自这里写链接内容 问题 (下面这是一种不好的指令使用方式”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中,该指令并无想要的在模板中定义的样式 **译者注: 用“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 */ }
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |