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

Question

I'm a little confused how Angular directives are supposed to render as DOM elements.

My directive template elements take classes fine, and they render at the correct dimensions, regardless of the directive element's dimensions.

The issue is the rendered directive element itself does take on class properties, which to me makes it look odd in the DOM, as it has an auto height.

Here's a visual of my issue:

Depicted is my directive element, seen here:

You can see that the months class has been applied to the directive, but its properties have not propagated. So the height and width of the directive go to auto , even though I want 60px . What is the issue?

Directive:

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

Partial template:

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

Answer 1

As @mosho mentioned in comments, it is probably due to a missing display: block on the <month> element.

To expand on this, the initial value for the display style is inline , which would apply unless overriden in a stylesheet somewhere, such as the default browser stylesheet, or the stylesheet(s) you've including on the page. As <month> is a custom html element, it won't be mentioned in the default browser stylesheet, and as such will be treated to have display: inline , so height and width styles are ignored.