假设我有一个指令“mydirect”,其中包含了大量具有大量嵌套类的div的模板.例如：
<div class="mydirect">
<div class="classA">
<div class="subclassA">
<div class="subclassB">
</div>
<div class="classB"></div>
</div>
我注意到,尽管有一个css文件中的类名(“mydirectstyle.css”),它被包含在index.html中,使用我的指令：
angular.module("MyApp",[]).
directive('mydirect',function() {
return {
restrict: 'E',replace: true,template: '-All that Html here-'
};
});
没有一个CSS属性被应用到它.将所有样式应用于多个类的最佳方式是什么？可以做到这一点,我不必手动选择每个元素并设置单个CSS属性？
解决方法
使用实际的元素名称更容易地在DOM中创建指令,而不是使用类方法.原因有两个：1)具有< mydirect> vs< div class =“mydirect”>和2)您可以通过使用恰当的css语法获得相同的样式设计.
以你的方式离开你的指令：
.directive('mydirect',function() {
return {
restrict: 'EA',template: '-All that Html here-'
};
});
示例1：
HTML：
<mydirect></mydirect>
CSS：
mydirect{ /* Styles go here */ }
示例2：
HTML：
<div mydirect></div>
CSS：
div[mydirect]{ /* Styles go here */ }
示例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-mydirect` attribute,regardless of its tag type */
[data-mydirect]{ /* Styles go here */ }
希望有帮助.
