如何 CSS 样式 AngularJS 指令？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19577027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to CSS style AngularJS directive?
提问by Rolando
Assuming I have a directive "mydirect" with a template that contains a lot of divs with a lot of nested classes. For example:
假设我有一个带有模板的指令“mydirect”，该模板包含许多带有许多嵌套类的 div。例如：
<div class="mydirect">
<div class="classA">
<div class="subclassA">
<div class="subclassB">
</div>
<div class="classB"></div>
</div>
I noticed that despite having the classnames in a css file ("mydirectstyle.css") and it being included in index.html, using my directive:
我注意到尽管在 css 文件（“mydirectstyle.css”）中有类名并且它被包含在 index.html 中，使用我的指令：
angular.module("MyApp", []).
directive('mydirect', function() {
return {
restrict: 'E',
replace: true,
template: '-All that Html here-'
};
});
None of the CSS properties are applied to it whatsoever. What is the best way to apply all my styles to those multiple classes? Can it be done such that I don't have to manually select each element and set individual CSS properties?
没有任何 CSS 属性应用于它。将我的所有样式应用于这些多个类的最佳方法是什么？是否可以做到这样我就不必手动选择每个元素并设置单独的 CSS 属性？
My index.html page contains a <mydirect> </mydirect>that gets replaced by the directive template shown above.
我的 index.html 页面包含一个<mydirect> </mydirect>被上面显示的指令模板替换的。
回答by tennisgent
Its much easier to use actual element names to create directives in your DOM rather than trying to use the class method. For two reasons: 1) its much more readable to have <mydirect>vs <div class="mydirect">and 2) you can get the same ease of styling by just using the proper css syntax.
使用实际元素名称在 DOM 中创建指令比尝试使用类方法要容易得多。有两个原因：1) 使用<mydirect>vs更易读<div class="mydirect">；2) 只需使用正确的 css 语法，您就可以轻松地进行样式设置。
Leave your directive just the way it is, except change it to restrict: 'EA'(docs for that here) and replace: false, as shown here:
保留您的指令原样，除了将其更改为restrict: 'EA'（此处的文档）和replace: false，如下所示：
.directive('mydirect', function() {
return {
restrict: 'EA',
replace: false,
template: '-All that Html here-'
};
});
Here are the options you can now use and how to configure the corresponding CSS to get the styles you want, as shown in this jsbin:
以下是您现在可以使用的选项以及如何配置相应的 CSS 以获得您想要的样式，如下面的 jsbin所示：
Hope that helps.
希望有帮助。
回答by ashutosh
As per google under and Angular directive creation logic In below example's description object, setting two config components. First, we're setting the restrict config option. The restrict option is used to specify how a directive can be invoked on the page.
根据 google under 和 Angular 指令创建逻辑在下面示例的描述对象中，设置两个配置组件。首先，我们设置了限制配置选项。限制选项用于指定如何在页面上调用指令。
As we saw before, there are four different ways to invoke a directive, so there are four valid options for restrict:
正如我们之前看到的，有四种不同的方式来调用指令，因此有四种有效的限制选项：
'A' - <span ng-sparkline></span>
'E' - <ng-sparkline></ng-sparkline>
'C' - <span class="ng-sparkline"></span>
'M' - <!-- directive: ng-sparkline -->
回答by Mahesh K
Angular Directive with Custom CSS.
带有自定义 CSS 的 Angular 指令。
app.directive('bookslist', function() {
return {
scope: true,
templateUrl: 'templates/bookslist.html',
restrict: "E",
controller: function($scope){
},
link: function(scope, element, attributes){
element.addClass('customClass');
}
}
});.customClass table{
!background: #ddd;
}
.customClass td{
border: 1px solid #ddd;
}回答by bekite
I think the solution to this is simple. But its only a guess. You define the directive by using:
我认为解决这个问题的方法很简单。但它只是一个猜测。您可以使用以下命令定义指令：
<div class="mydirect></div>
and in your directive definition you use:
并在您的指令定义中使用：
restrict: 'E'
The directive is not rendered by Angularjs because Angularjs is looking for something like:
该指令不是由 Angularjs 呈现的，因为 Angularjs 正在寻找类似的东西：
<mydirect></mydirect>
Simply change restrict: 'E'to restrict: 'C'.
只需更改restrict: 'E'为restrict: 'C'.
