如何CSS样式AngularJS指令？

Question

假设我有一个指令＆＃34; mydirect＆＃34;使用包含大量具有大量嵌套类的div的模板。例如：

<div class="mydirect">
  <div class="classA">
    <div class="subclassA">
      <div class="subclassB">
      </div>
    <div class="classB"></div>
</div>

我注意到尽管在css文件中有类名（＆＃34; mydirectstyle.css＆＃34;）并且它包含在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'（here的文档）和replace: false，如下所示：

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

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

希望有所帮助。

Answer 2

根据谷歌和Angular指令创建逻辑在下面的示例的描述对象中，设置两个配置组件。首先，我们设置restrict配置选项。 restrict选项用于指定如何在页面上调用指令。

正如我们之前看到的，有四种不同的方式来调用指令，因此有四种有效的限制选项：

'A' - <span ng-sparkline></span> 
'E' - <ng-sparkline></ng-sparkline> 
'C' - <span class="ng-sparkline"></span> 
'M' - <!-- directive: ng-sparkline -->

Answer 3

自定义CSS的角度指令。

＆＃13;

＆＃13;

app.directive('bookslist', function() {

    return {
    	scope: true,
        templateUrl: 'templates/bookslist.html',
        restrict: "E",
        controller: function($scope){

        },
        link: function(scope, element, attributes){
        element.addClass('customClass');
      }

    }

});

＆＃13;

.customClass table{
	!background: #ddd;

}
.customClass td{
	border: 1px solid #ddd;

}

＆＃13;

＆＃13;

＆＃13;

Answer 4

我认为这个解决方案很简单。但它只是一个猜测。 您可以使用以下命令定义指令：

<div class="mydirect></div>

并在您的指令定义中使用：

restrict: 'E'

Angularjs不呈现该指令，因为Angularjs正在寻找类似的东西：

<mydirect></mydirect>

只需将restrict: 'E'更改为restrict: 'C'。