如何CSS样式AngularJS指令？

Question

假设我有一个带有模板的指令"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>由上面显示的指令模板替换的页面.

Answer 1

使用实际元素名称更容易在DOM中创建指令而不是尝试使用类方法.有两个原因:1)它具有更高的可读性和<mydirect>vs <div class="mydirect">2)你可以通过使用正确的css语法获得相同的样式.

保留你的指令就像它一样,除了把它改为restrict: 'EA'(这里的文档)replace: false,如下所示:

.directive('mydirect', function() {
    return {
        restrict: 'EA',
        replace: false,
        template: '-All that Html here-'
    };
});

以下是您现在可以使用的选项以及如何配置相应的CSS以获取所需的样式,如此jsbin所示:

希望有所帮助.

Answer 2

带有自定义 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;

}