Korzystanie z polecenia ng-transclude nie działa dobrze w tabeli

Question

Utworzono prostą dyrektywę, która służy do wyświetlania tekstu w pliku <td>, gdy brak danych tabeli (np. "Nie znaleziono wyników") zajmuje całe rząd tabeli. Zanim jeszcze miałem statyczny tekst w <td>, ale teraz chcę móc umieścić w nim dowolny DOM. Próbowałem dodać ng-transclude do mojej dyrektywy, ale teraz jest renderowanie elementu w dziwny sposób.

Oto moja dyrektywa:

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

      scope.colSpan = span; 

      scope.$watch(attrs.skNoResult, function (list) { 
       if (list.length) { 
        scope.hasResult = true; 
       } else { 
        scope.hasResult = false; 
       } 
      }); 
     } 
    }; 
}]); 

To w zasadzie tylko śledzi zbiorze danych (array) i sprawdza długość, aby zobaczyć, czy nie ma żadnych danych, czy nie. Jeśli tak jest, wyświetlamy ten wiersz przy pomocy ngIf.

Moje html właśnie wygląda ten

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

Problem polega na tym, że dołączany tekst jest włożona do DOM jak tylko textNode i pojawia się powyżej <table> raczej niż wewnątrz niej. Jakiś pomysł dlaczego tak się dzieje?

Answer 1

wierzę powód widzisz to nie ze względu na skośne, lecz przeglądarka widząc, że jest ona nieważna html wewnątrz <tr> gdyż spodziewa <td> iw rezultacie porusza zawartość powyżej stole przed kątowa nawet ma szansę uruchomić i wykonać transclusion. Możesz łatwo to sprawdzić, usuwając dowolny kod Angular i po prostu zostaw HTML, a zauważysz, że wynik jest dokładnie taki sam.

Tutaj jest rozwiązanie, które może być w stanie używać:

<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> 

a dyrektywy:

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; 
    } 
    }; 
}]) 

pamiętać, że korzystanie z elementem ngTransclude, tj <ng-transclude></ng-transclude> dostępne są wyłącznie w wersji kątowej 1.3.0-beta.16 i nowsze. Jeśli używasz wersji 1.2, musisz użyć użycia atrybutu, tak jak w powyższym przykładzie: <div ng-transclude></div>

Oto działa demo.