CSS设置角度指令?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (32)

假设我有一个指令“mydirective”,它的模板包含了大量的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>它被上面显示的指令模板所取代。

提问于
用户回答回答于

使用实际元素名在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以获得所需的样式:

用户回答回答于

Angular Directive with Custom CSS

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;

}

扫码关注云+社区