title: AngularJS: strange behavior on templateUrl in directive(template works well)
body: <p>I have two directives, one is table, the other one is button.<br/>
  But when I use templateUrl in button directive, all buttons are displayed in the same line in table. <br/>
  But "template" can work well.<br/>
  Anyone can help on this?<br/><br/></p>
  
  <p>The plunker of these two demos are listed below: <br/>
  <a href="http://plnkr.co/edit/9EaRfrSQggPETrXhNZvq?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/9EaRfrSQggPETrXhNZvq?p=preview</a> : using templateUrl<br/>
  <a href="http://plnkr.co/edit/UHzEpugxtM6JjoNrUd9X?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/UHzEpugxtM6JjoNrUd9X?p=preview</a> : using template<br/></p>
  
  <p>The only difference between directives myButton1 and myButton2 is :<br/>
  <strong>myButton1</strong> uses :<br/>
  <strong>templateUrl</strong>: function (element, attrs) {<br/>
      return TEMPLATE_ACTION;<br/>
  }<br/>
  The content of "actionTemplate.html" is:<br/></p>
  
  <pre><code>&lt;div ng-if="config !== undefined"&gt;b&lt;/div&gt;&lt;br/&gt;&lt;br/&gt;
  </code></pre>
  
  <p><strong>myButton2</strong> uses :<br/>
  <strong>template</strong>: '<code>&lt;div ng-if="config !== undefined"&gt;b&lt;/div&gt;</code>',</p>
  
  <pre><code>    angular.module('myApp', [])
              .controller('MyController', ['$scope', function ($scope) {
                  $scope.data = [
                      {name: 'field1', config: {type: 'config1'}},
                      {name: 'field2', config: {type: 'config2'}}
                  ];
              }])
              .directive('myGrid', ['$compile', function($compile) {
                  return {
                      restrict: 'E',
                      replace: true,
                      template: '' +
                          '&lt;table&gt;' +
                          '&lt;tbody&gt;' +
                          '&lt;tr ng-repeat="item in data"&gt;' +
                          '    &lt;td&gt;&lt;div&gt;&lt;my-button2 config="item.config"&gt;&lt;/my-button2&gt;&lt;/div&gt;&lt;/td&gt;' +
                          '    &lt;td&gt;{{item.name}}&lt;/td&gt;' +
                          '&lt;/tr&gt;' +
                          '&lt;/tbody&gt;' +
                          '&lt;/table&gt;',
                      scope: true
                  }
                  }])
              .directive("myButton1", ["$compile",
                  function ($compilee) {
                      var TEMPLATE_ACTION = 'views/actionTemplate.html';
                      return {
                          restrict: "E",
                          replace: true,
                          scope: true,
                          templateUrl: function (element, attrs) {
                              return TEMPLATE_ACTION;
                          },
                          link: function (scope, iElement, iAttrs) {
                              var config = scope.$eval(iAttrs.config);
                              scope.config = config;
                          }
                      };
                  }
              ])
      ;
  </code></pre>
  
  <p>The result is that two buttons are displayed in the same line as below:<br/>
  <a href="https://i.stack.imgur.com/qCCzM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qCCzM.png" alt="wrong result"></a></p>
  
  <p>But one use "template" in the directive, it works well:<br/></p>
  
  <pre><code>        angular.module('myApp', [])
              .controller('MyController', ['$scope', function ($scope) {
                  $scope.data = [
                      {name: 'field1', config: {type: 'config1'}},
                      {name: 'field2', config: {type: 'config2'}}
                  ];
              }])
              .directive('myGrid', ['$compile', function($compile) {
                  return {
                      restrict: 'E',
                      replace: true,
                      template: '' +
                          '&lt;table&gt;' +
                          '&lt;tbody&gt;' +
                          '&lt;tr ng-repeat="item in data"&gt;' +
                          '    &lt;td&gt;&lt;div&gt;&lt;my-button2 config="item.config"&gt;&lt;/my-button2&gt;&lt;/div&gt;&lt;/td&gt;' +
                          '    &lt;td&gt;{{item.name}}&lt;/td&gt;' +
                          '&lt;/tr&gt;' +
                          '&lt;/tbody&gt;' +
                          '&lt;/table&gt;',
                      scope: true
                  }
                  }])
              .directive("myButton2", ["$compile",
                  function ($compilee) {
                      return {
                          restrict: "E",
                          replace: true,
                          scope: true,
                          template: '&lt;div ng-if="config !== undefined"&gt;b&lt;/div&gt;',
                          link: function (scope, iElement, iAttrs) {
                              var config = scope.$eval(iAttrs.config);
                              scope.config = config;
                          }
                      };
                  }
              ])
      ;
  </code></pre>
  
  <p>The result is as below:<br/>
  <a href="https://i.stack.imgur.com/nAttd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nAttd.png" alt="right result"></a></p>