Using ng-transclude doesn't seem to work well in a table

Question

I created a simple directive that is used to display some text in a when there is no table data (i.e. \"No results found\" ) takes up the entire row

Answer 1

I believe the reason you are seeing this is not because of Angular but rather the browser seeing that it is invalid html inside a <tr> as it is expecting <td> and as a result it moves this content to above the table BEFORE Angular even gets a chance to run and do the transclusion. You can easily test this by removing any Angular code and just leave the HTML and you'll notice the outcome is exactly the same.

Here is a workaround that you might be able to use:

<tr ng-if="!model.dataSet.length">
  <td sk-no-result="model.dataSet">Here is my text I want to transclude into my directive</td>
</tr>

And the directive:

app.directive('skNoResult', ['$rootScope', function () {
  return {
    restrict: 'A',
    replace: true,
    transclude: true,
    template: '<td class="left" colspan="{{ colSpan }}"><div ng-transclude></div></td>',
    link: function (scope, elem, attrs) {
        var span = angular.element(elem).parents('tbody').siblings('thead').find('tr').children().length;
        scope.colSpan = span;
    }
  };
}])

Note that the element usage of ngTransclude, i.e. <ng-transclude></ng-transclude> is only available from Angular version 1.3.0-beta.16 and above. If you are using a 1.2 release you need to use the attribute usage as in the example above <div ng-transclude></div>

Here is a working demo.