When implementing a directive in this way, the actual element (<a-directive>) appears to have dimensions of 0px height and 0px width. View jsfiddle example
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) {
}
};
});
Here is an example of the html used:
<a-directive></a-directive>
How can I ensure that the html element has the correct dimensions for its children?
EDIT:
In the provided fiddle, the element does indeed display with proper dimensions. However, in my own project it often does not. Any insights into why this might occur?