javascript - 为什么类不适用于 Angular 指令？

Question

我有点困惑 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');
    }
  }
})

Answer 1

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

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