title: container of directive has 0px height, 0px width - angularjs
body: <p>When creating a directive the following way, the element itself (<code>&lt;a-directive&gt;</code>) has 0px height, 0px width. <a href="http://jsfiddle.net/vLjja01j/" rel="nofollow">jsfiddle</a></p>
  
  <pre><code> var myApp = angular.module('myApp', []).directive('aDirective', function () {
      return {
          template: '&lt;div style="height:100px;width:100px;background-color:red;"&gt;&lt;/div&gt;',
        restrict: 'E',
        link: function (scope, element, attrs) {
        }
      };
    });
  </code></pre>
  
  <p>And the html:</p>
  
  <pre><code>&lt;a-directive&gt;&lt;/a-directive&gt;
  </code></pre>
  
  <p>How do I get the html element to have its children dimension?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I just see that in the fiddle, it has a dimension. But in my project it generally has not. Any ideas why this might be the case?</p>