为什么类不适用于 Angular 指令？答案

【问题标题】：Why don't classes apply to Angular directives?为什么类不适用于 Angular 指令？
【发布时间】：2015-04-23 13:40:21
【问题描述】：

我有点困惑 Angular 指令应该如何呈现为 DOM 元素。

我的指令模板元素可以很好地使用类，并且无论指令元素的尺寸如何，它们都会以正确的尺寸呈现。

问题是渲染的指令元素本身确实具有类属性，这在我看来使它在 DOM 中看起来很奇怪，因为它有一个 auto 高度。

这是我的问题的视觉效果：

描述的是我的指令元素，在这里看到：

您可以看到months 类已应用于指令，但其属性尚未传播。所以指令的高度和宽度转到auto，即使我想要60px。有什么问题？

指令：

<month ng-model="month" class="months"></month>

部分模板：

app.directive('month', function() {
  return {
    scope:{},
    template:'<div class="months">test</div>',
    link: function (scope, element, attrs) {
      element.addClass('months');
    }
  }
})

【问题讨论】：

你试过ng-class="months"吗？
效果一样。在 Chrome Inspector 中将鼠标悬停在 DOM 上时，该指令会显示正确的高度和宽度。但实际上并非如此。
是块元素吧？
制作一个小提琴，但这可能是由于在<month> 元素上缺少display: block;。
此外，您可能希望在指令中设置 replace: true ，因为您将指令作为 HTML 元素调用。这将删除人为的元素并将其替换为您期望的 div...

标签： javascript css angularjs class angularjs-directive

【解决方案1】：

正如 @mosho 在 cmets 中提到的，这可能是由于 <month> 元素上缺少 display: block。

要对此进行扩展，the initial value for the display style is inline，除非在某处的样式表中被覆盖，例如默认浏览器样式表或您在页面上包含的样式表，否则它将适用。由于<month>是自定义html元素，默认浏览器样式表中不会提及，因此会被视为有display: inline，因此忽略高度和宽度样式。

【讨论】：