Die Verwendung von ng-transclude scheint in einer Tabelle nicht gut zu funktionieren

Question

Ich habe eine einfache Direktive erstellt, die verwendet wird, um Text in einer <td> anzuzeigen, wenn keine Tabellendaten (dh "No results found") den gesamten Inhalt belegt Reihe der Tabelle. Vorher hatte ich nur statischen Text in der <td>, aber jetzt möchte ich in der Lage sein, ein beliebiges DOM hinein zu setzen. Ich habe versucht, ng-transclude zu meiner Direktive hinzuzufügen, aber jetzt macht es das Element auf eine merkwürdige Weise.

Hier ist meine Richtlinie:

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

Es im Grunde hält gerade Spur des Datensatzes (Array) und überprüft die Länge, um zu sehen, ob es irgendwelche Daten ist oder nicht. Wenn dies der Fall ist, zeigen wir diese Zeile mit ngIf an.

Meine html sieht genauso aus wie diese

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

Das Problem ist, dass der transkludiert Text in das DOM als nur einen textNode eingeführt wird und über den <table> anstatt nach innen von ihm erscheinen. Irgendeine Idee, warum das passiert?

Answer 1

Ich glaube, der Grund, warum Sie dies sehen wegen Angular nicht ist, sondern der Browser zu sehen, dass es in einem <tr> ungültig html ist, wie es <td> und als Ergebnis wird erwartet, dass es bewegt diesen Inhalt über dem Tisch vor Angular selbst bekommt eine Chance zu rennen und die Transclusion zu machen. Sie können dies einfach testen, indem Sie jeglichen Angular-Code entfernen und einfach den HTML-Code belassen, und Sie werden feststellen, dass das Ergebnis genau gleich ist.

Hier ist eine Abhilfe, die Sie vielleicht nutzen können:

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

und die Richtlinie:

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

Beachten Sie, dass das Element Verwendung von ngTransclude, dh <ng-transclude></ng-transclude> von Angular-Version verfügbar ist 1.3.0-beta.16 und höher. Wenn Sie ein 1.2-Release verwenden, müssen Sie die Attributverwendung wie im obigen Beispiel verwenden <div ng-transclude></div>

Hier ist ein funktionierender demo.