如何 CSS 样式 AngularJS 指令？

Posted 2023-02-19

【中文标题】如何 CSS 样式 AngularJS 指令？

【英文标题】：How to CSS style AngularJS directive?

【发布时间】：2013-11-03 19:34:06

【问题描述】：

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

【问题讨论】：

css 属性应该应用在你的指令模板中。你能做一个显示问题的 plunker 或 jsfiddle 吗？

是的，如果没有看到你的 CSS，很难告诉你发生了什么

【参考方案1】：

使用实际元素名称在 DOM 中创建指令比尝试使用类方法要容易得多。有两个原因：1) <mydirect> 与 <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 所示：

希望对您有所帮助。

【讨论】：

您使用模板启用了replace: true，因此您的组件元素将替换为<p> 标记（基于您的模板字符串）。因此hello-world... 的 CSS 不匹配，因此不会被应用。如果你设置replace: false，一切正常。

你是对的。为避免混淆，我更新了我的答案。希望对您有所帮助。

【参考方案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;

【讨论】：

一个好的答案将始终解释所做的事情以及为什么以这种方式完成，不仅是为了 OP，而且是为了未来的 SO 访问者。

另外，sn-p 没有运行。

【参考方案3】：

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

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

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

【参考方案4】：

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

<div class="mydirect></div>

在你的指令定义中你使用：

restrict: 'E'

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

<mydirect></mydirect>

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

【讨论】：

我试过了。它不起作用。它必须与我的直接元素被指令模板替换时的事实有关，由于替换，没有任何 CSS 被应用。问题是如何处理？

@Rolando 这里是一个例子，它似乎以你描述的方式工作；也许还有什么不对劲。但是请注意，指令类应用于模板本身，因此您的类可能不会在您期望的位置结束。 plnkr.co/edit/zQ5teYoQ7qeUbsM71b57

@Rolando 你怎么称呼你的指令？您需要在指令“mydirect”模板之外的某处有 。我认为问题不在于替换，而是 angularjs 没有找到要渲染的指令。