22

假设我有一个指令“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>被上面显示的指令模板替换的。

4

4 回答 4

55

使用实际元素名称在 DOM 中创建指令比尝试使用类方法要容易得多。<mydirect>有两个原因：1) 使用vs更具可读性<div class="mydirect">和 2) 只需使用正确的 css 语法，您就可以轻松地进行样式设置。

保持您的指令原样，除了将其更改为restrict: 'EA'(docs for that here ) 和replace: false，如下所示：

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

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

在此处输入图像描述

希望有帮助。

于 2013-10-25T00:07:43.000 回答
5

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

}

于 2016-08-31T11:31:54.657 回答
4

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

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

'A' - <span ng-sparkline></span> 
'E' - <ng-sparkline></ng-sparkline> 
'C' - <span class="ng-sparkline"></span> 
'M' - <!-- directive: ng-sparkline -->
于 2015-10-16T15:45:20.123 回答
3

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

<div class="mydirect></div>

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

restrict: 'E'

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

<mydirect></mydirect>

只需更改restrict: 'E'为restrict: 'C'.

于 2013-10-24T21:52:54.170 回答