{{$ index}} von ng-repeat berechnet nach Linkerfunktion der Winkel-Direktive. $ kompilieren Sie es?

Question

html

<div repeater ng-repeat='item in items' class='first' id = '{{$index}}' > {{item}} </div> 

AngularJS Richtlinie: -

angular.module('time', []) 
    .directive('repeater', function() { 

    var linkFn = function(scope, element, attrs){ 
     var id = $(element).attr('id'); 
     alert(id); // {{$index}} 
    } ... 

dynamische id innerhalb ng-repeat erstellt, wenn innerhalb Direktive zeigt als {{$ Index}} anstelle von value = 0, 1, evozierte 2 ...

Wie stellen Sie sicher, wenn Linker-Funktion in Direktive ausgeführt wird die dynamischen IDs verwendet werden? Ich denke, es kann mit $compile innerhalb der Richtlinie getan werden. Aber ich kann mir nicht vorstellen, wie?

$compile(element)(scope) 

ist die Syntax. Aber offensichtlich die falsche Reihenfolge.

Answer 1

Wenn Sie wirklich möchten, dass die IDs bereits ausgefüllt sind, können Sie den entsprechenden Code innerhalb von scope.$evalAsync oder $timeout ausführen, um sicherzustellen, dass die Bindung zuerst aktualisiert wurde. Ich schlage vor, dass Sie versuchen sollten, das DOM nicht zu inspizieren und sich stattdessen auf Ihr Modell für eine dieser Informationen zu verlassen, indem Sie scope.$index verwenden.

Ihre Anweisung wird bereits kompiliert, wenn und wenn Ihre Link-Funktion erreicht ist, so dass ich denke, dass eine Neukompilierung nicht helfen würde. Es ist nur ein Fall, lange genug zu warten, um die Verknüpfung zu beenden und $digest zu starten, wo die Attribute tatsächlich aktualisiert werden. Genau das wird $evalAsync für Sie tun.

Beispiel hier: http://plnkr.co/edit/n77x4C?p=preview

Answer 2

ich diese Hoffnung wird Ihnen helfen,

1. Richtlinie

   angular.module('time', []).directive('repeater', function() { 
       return{ 
         restrict:"E", 
         scope:{ 
          itemarray: "=itemarray" 
         } 
         template:"<div ng-repeat='item in itemarray' class='first' id = '{{$index}}' > {{item}} </div>", 
         link:linkFn 
        } 
         var linkFn = function(scope, element, attrs){ 
        var id = $(element).attr('id'); 
        alert(id); // {{$index}} 
   

   } ...

2. html

    <repeater itemarray='itemarray"></repeater>