The directive container has 0px height, 0px width - angularjs

Question

When creating a directive as follows, the element ( <a-directive>) itself has a height of 0px, a width of 0px. jsfiddle

 var myApp = angular.module('myApp', []).directive('aDirective', function () {
    return {
        template: '<div style="height:100px;width:100px;background-color:red;"></div>',
      restrict: 'E',
      link: function (scope, element, attrs) {
      }
    };
  });

And html:

<a-directive></a-directive>

How to get an html element to measure its children?

EDIT:

I just see that he has a dimension in the violin. But in my project it doesn’t have at all. Any ideas why this could be so?

Answer 1

You can add CSS for your directive. Example:

a-directive {
  display: block;
}

Answer 2

Add replace:trueto the return object from the directive, and the directive will replace the div.