Direktive Isolation Scope mit ng-Repeat Scope in AngularJS

Ich habe eine Direktive mit einem isolierten Gültigkeitsbereich (damit ich die Direktive an anderen Stellen wiederverwenden kann), und wenn ich diese Direktive mit einem verwende ng-repeat, funktioniert sie nicht.

Ich habe die gesamte Dokumentation und die Antworten zum Stapelüberlauf zu diesem Thema gelesen und verstehe die Probleme. Ich glaube, ich habe alle üblichen Fallstricke vermieden.

Ich verstehe also, dass mein Code aufgrund des durch die ng-repeatDirektive erstellten Bereichs fehlschlägt . Meine eigene Direktive erstellt einen Isolate-Scope und führt eine bidirektionale Datenbindung an ein Objekt im übergeordneten Scope durch. Meine Direktive weist dieser gebundenen Variablen einen neuen Objektwert zu. Dies funktioniert einwandfrei, wenn meine Direktive ohne verwendet wird ng-repeat(die übergeordnete Variable wird korrekt aktualisiert). Mit ng-repeaterstellt die Zuweisung jedoch eine neue Variable im ng-repeatBereich und die übergeordnete Variable sieht die Änderung nicht. All dies basiert wie erwartet auf dem, was ich gelesen habe.

Ich habe auch gelesen, dass bei mehreren Anweisungen für ein bestimmtes Element nur ein Bereich erstellt wird. Und dass priorityin jeder Direktive ein a gesetzt werden kann, um die Reihenfolge zu definieren, in der die Direktiven angewendet werden; Die Anweisungen werden nach Priorität sortiert und anschließend ihre Kompilierungsfunktionen aufgerufen (Suche nach dem Wort Priorität unter http://docs.angularjs.org/guide/directive ).

Ich hatte gehofft, dass ich die Priorität verwenden kann, um sicherzustellen, dass meine Direktive zuerst ausgeführt wird und am Ende einen isolierten Bereich erstellt. Wenn ng-repeatsie ausgeführt wird, wird der isolierte Bereich wiederverwendet, anstatt einen Bereich zu erstellen, der prototypisch vom übergeordneten Bereich erbt. In der ng-repeatDokumentation heißt es, dass diese Richtlinie auf Prioritätsebene ausgeführt wird 1000. Es ist nicht klar, ob 1es sich um eine höhere oder eine niedrigere Prioritätsstufe handelt. Als ich 1in meiner Direktive die Prioritätsstufe verwendet habe, hat dies keinen Unterschied gemacht, also habe ich es versucht 2000. Aber das macht die Sache noch schlimmer: Meine wechselseitigen Bindungen werden undefinedund meine Direktive zeigt nichts an.

Ich habe eine Geige erstellt, um mein Problem zu zeigen . Ich habe die priorityEinstellung in meiner Richtlinie auskommentiert. Ich habe eine Liste von Namensobjekten und eine Direktive namens name-row, die die Vor- und Nachnamenfelder im Namensobjekt anzeigt. Wenn auf einen angezeigten Namen geklickt wird, soll eine selectedVariable im Hauptbereich festgelegt werden. Das Array von Namen und die selectedVariable werden name-rowmithilfe der bidirektionalen Datenbindung an die Direktive übergeben.

Ich weiß, wie dies funktioniert, indem Funktionen im Hauptbereich aufgerufen werden. Ich weiß auch, dass selectedDinge funktionieren würden , wenn sie sich in einem anderen Objekt befinden und ich mich an das äußere Objekt binde. Aber ich bin im Moment nicht an diesen Lösungen interessiert.

Stattdessen habe ich folgende Fragen:

• Wie kann ich verhindern, ng-repeatdass ein Bereich erstellt wird, der prototypisch vom übergeordneten Bereich erbt, und stattdessen den Isolate-Bereich meiner Direktive verwenden?
• Warum 2000funktioniert die Prioritätsstufe in meiner Richtlinie nicht?
• Ist es mit Batarang möglich zu wissen, welche Art von Oszilloskop verwendet wird?

Okay, durch viele der obigen Kommentare habe ich die Verwirrung entdeckt. Zunächst einige Klarstellungen:

• ngRepeat hat keinen Einfluss auf den von Ihnen gewählten Isolatbereich
• die Parameter in ngRepeat auf Attribute zur Verwendung übergeben Ihre Richtlinie der Sie verwenden , um eine prototypisch vererbte Umfang
• Der Grund, warum Ihre Direktive nicht funktioniert, hat nichts mit dem isolierten Bereich zu tun

Hier ist ein Beispiel für denselben Code, wobei die Direktive entfernt wurde:

<li ng-repeat="name in names"
    ng-class="{ active: $index == selected }"
    ng-click="selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

Hier ist eine JSFiddle, die zeigt, dass es nicht funktioniert. Sie erhalten genau die gleichen Ergebnisse wie in Ihrer Richtlinie.

Warum funktioniert es nicht? Weil Bereiche in AngularJS prototypische Vererbung verwenden. Der Wert selectedin Ihrem übergeordneten Bereich ist ein Grundelement . In JavaScript bedeutet dies, dass es überschrieben wird, wenn ein untergeordnetes Element denselben Wert festlegt. In AngularJS-Bereichen gibt es eine goldene Regel: Modellwerte sollten immer verwendet werden mit einem versehen .sein. Das heißt, sie sollten niemals primitiv sein. Weitere Informationen finden Sie in dieser SO-Antwort .

Hier ist ein Bild davon, wie die Bereiche zunächst aussehen.

Nach dem Klicken auf das erste Element sehen die Bereiche nun folgendermaßen aus:

Beachten Sie, dass selectedim Bereich ngRepeat eine neue Eigenschaft erstellt wurde. Der Controller-Bereich 003 wurde nicht geändert.

Sie können wahrscheinlich erraten, was passiert, wenn wir auf den zweiten Punkt klicken:

Ihr Problem wird also überhaupt nicht durch ngRepeat verursacht, sondern durch das Brechen einer goldenen Regel in AngularJS. Die Möglichkeit, dies zu beheben, besteht darin, einfach eine Objekteigenschaft zu verwenden:

$scope.state = { selected: undefined };

<li ng-repeat="name in names"
    ng-class="{ active: $index == state.selected }"
    ng-click="state.selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

Hier ist eine zweite JSFiddle zeigt, dass dies auch funktioniert.

So sehen die Bereiche zunächst aus:

Nach dem Klicken auf den ersten Eintrag:

Hier wird der Controller-Bereich wie gewünscht beeinflusst.

Um zu beweisen, dass dies weiterhin mit Ihrer Direktive mit einem isolierten Bereich funktioniert (da dies wiederum nichts mit Ihrem Problem zu tun hat), ist hier auch eine JSFiddle , die Ansicht muss das Objekt widerspiegeln. Sie werden feststellen, dass die einzige notwendige Änderung darin bestand, ein Objekt anstelle eines Grundelements zu verwenden .

Geltungsbereich zunächst:

Geltungsbereich nach dem Klicken auf das erste Element:

Fazit: Auch hier liegt Ihr Problem nicht im isolierten Bereich und nicht in der Funktionsweise von ngRepeat. Ihr Problem ist, dass Sie gegen eine Regel verstoßen, von der bekannt ist, dass sie genau zu diesem Problem führt. Modelle in AngularJS sollten immer eine haben ..

Schauen Sie sich stattdessen die folgende Geige an, ohne direkt zu versuchen, die Beantwortung Ihrer Fragen zu vermeiden:

http://jsfiddle.net/dVPLM/

Der entscheidende Punkt ist, dass Sie, anstatt zu versuchen, das konventionelle Verhalten von Angular zu bekämpfen und zu ändern, Ihre Direktive so strukturieren können, dass Sie damit arbeiten, anstatt ng-repeatzu versuchen, sie zu überschreiben.

In Ihrer Vorlage:

    <name-row 
        in-names-list="names"
        io-selected="selected">
    </name-row>

In Ihrer Richtlinie:

    template:
'        <ul>' +      
'            <li ng-repeat="name in inNamesList" ng-class="activeClass($index)" >' +
'                <a ng-click="setSelected($index)">' +
'                    {{$index}} - {{name.first}} {{name.last}}' +
'                </a>' +
'            </li>' +
'        </ul>'

Als Antwort auf Ihre Fragen:

• ng-repeat Wenn Sie einen Bereich erstellen, sollten Sie wirklich nicht versuchen, dies zu ändern.
• Priorität in Direktiven ist nicht nur die Ausführungsreihenfolge - siehe: AngularJS: Wie ordnet der HTML-Compiler die Reihenfolge für das Kompilieren an?
• Wenn Sie in Batarang die Registerkarte Leistung überprüfen, können Sie die für jeden Bereich gebundenen Ausdrücke anzeigen und prüfen, ob dies Ihren Erwartungen entspricht.