Manuelles transclude in Verbindung mit ng-repeat

Question

Ich habe eine Winkelanwendung, die einen ng-repeat-start verwendet, um einige dynamische Informationen anzuzeigen.

<div> 
    <table> 
    <tbody> 
     <tr my-directive ng-repeat="data in vm.data"> 
     <td ng-bind="data.id"></td>  
     <td ng-bind="data.id"></td>  
     </tr> 
     <tr ng-repeat-end> 
     <td>extrarow</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Ich baute auch eine Richtlinie, die ich eine Klasse für die gesamte tr anzuwenden, je nach dem Wert von einigen der Daten verwendet werden soll. Ich wollte Link verwenden, um das zu tun, anstatt eine $ Uhr zu verwenden.

Da das selbst viele enthalten kann, wollte ich transclude verwenden, um dies zu tun. Ich möchte nicht, dass der Tag in meiner Tabelle eingefügt werden, da dies all meine Designs bricht, so dass ich dies manuell tun, so etwas wie diese:

function myDirective() { 
    return { 
     transclude: true, 
     scope: {}, 
     link: function($scope, $element, $attrs, $ctrl, $transclude) { 
      var cloned = $transclude(); 
      $element.append(cloned);    
     } 
    } 
} 

Das Problem ist, das funktioniert nicht wie erwartet. Das geklonte Objekt wird nur an die letzte Zeile der ng-Wiederholung angehängt. Wahrscheinlich liegt das an dem $ element-Objekt, aber ich bin mir nicht sicher.

Ich reproduziert das Problem in diesem jsfiddle.

Irgendwelche Ideen, wo das Problem liegt? Vielen Dank. Sie nicht zu viele haben

Answer 1

ich verwirrt bin, warum Sie transcluden sind erforderlich. Ich denke this is what you're looking for; Aber ich muss sagen, ich bin nicht überzeugt von der Wirtschaft von $ beobachten über $ watch hier.

Für $ beachten, ich habe folgendes TR hinzugefügt:

<tr my-directive data-value="{{data.id}}" ng-repeat="data in vm.data"> 

und die Richtlinie zeigt auf eine Bedingung, die Klasse zu ändern.

function myDirective() { 
     return { 
     link: function($scope, element, attrs) { 
      attrs.$observe('value', function(val) { 
      if (val && val == "9.2") 
       element.addClass("myClass"); 
      else 
       element.removeClass("myClass"); 
      });    
     } 
    } 
    } 

Answer 2

Wenn Sie können eine Klasse je nach Inhalt hinzufügen möchten Sie ng-class verwenden

<td ng-bind="data.id" ng-class="{'myClass': data.id > 4}"></td> 

EDIT

Sie können eine einmalige Bindung, verwenden Sie dann $watchers

<td ng-bind="data.id" ng-class="::{'myClass': data.id > 4}"></td> 

Answer 3

Einstellung transcluden auf false in Ihrer Richtlinie wird Sie die ganze Liste geben.

Answer 4

Wenn Sie eine andere benutzerdefinierte ng-repeat-Direktive ausführen möchten, die Sie geschrieben haben, können Sie eine andere Priorität für Ihre ng-repeat-Direktive festlegen. Eine niedrigere Priorität als die Standard-Anweisung ng-repeat führt dazu, dass sie nach dem Standard ng-repeat ausgeführt wird.

ich Ihre jsFiddle mit einer Probe aktualisiert haben, https://jsfiddle.net/1x08vxpm/15/

angular.module('app', []) 

.controller('Controller', Controller)  
.directive('ngRepeat', ngRepeat); 

function ngRepeat() { 
    return {  
     priority: 0, 
     scope: {}, 
     link: function($scope, $element, $attrs) { 
      $element.css('color', 'red'); 
     } 
    } 
}