如何使用CSS样式AngularJS指令？
假设我有一个带有模板的指令"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属性？
我的index.html页面包含一个被上面显示的指令模板替换的<mydirect> </mydirect>。
回答 3
Stack Overflow用户
发布于 2013-10-25 08:07:43
使用实际的元素名称在DOM中创建指令要比尝试使用class方法容易得多。出于两个原因: 1)使用<mydirect>比使用<div class="mydirect">更具可读性；2)只需使用正确的css语法，您就可以获得同样轻松的样式。
保持您的指令不变，除非将其更改为restrict: 'EA' (该here的文档)和replace: false，如下所示：
.directive('mydirect', function() {
return {
restrict: 'EA',
replace: false,
template: '-All that Html here-'
};
});下面是您现在可以使用的选项，以及如何配置相应的CSS以获得所需的样式，如this jsbin中所示
希望这能有所帮助。
Stack Overflow用户
发布于 2015-10-16 23:45:20
根据google under和Angular指令创建逻辑，在下面示例的描述对象中，设置两个配置组件。首先，我们设置了限制配置选项。restrict选项用于指定如何在页面上调用指令。
正如我们之前看到的，有四种不同的方法来调用指令，因此有四个有效的restrict选项：
'A' - <span ng-sparkline></span>
'E' - <ng-sparkline></ng-sparkline>
'C' - <span class="ng-sparkline"></span>
'M' - <!-- directive: ng-sparkline -->Stack Overflow用户
发布于 2013-10-25 05:52:54
我认为这个问题的解决方案很简单。但这只是一种猜测。您可以使用以下命令定义该指令：
<div class="mydirect></div>在您的指令定义中，您使用：
restrict: 'E'该指令不是由Angularjs呈现的，因为Angularjs正在寻找类似于：
<mydirect></mydirect>只需将restrict: 'E'更改为restrict: 'C'。
https://stackoverflow.com/questions/19577027
复制相似问题