Mehrstufige Einbindung in Angular 1,5

ich eine generische <item> Richtlinie haben, und eine <listing> Richtlinie mit Filtern und Paginierung Tools für die Auflistung, dass <item>:Mehrstufige Einbindung in Angular 1,5

Beispiel: https://plnkr.co/edit/r6byzhFX5m674ONhH1JS?p=preview

Die <listing> Vorlage ist etwa so:

<div ng-repeat="item in items"> 
    <item date="item"> 
     <ng-transclude ng-transclude-slot="itemContent"></ng-transclude> 
    </item> 
</div>

Die <item> Richtlinie verwendet die neue Winkel 1.5 Multi-Slot Einbindung Fußzeile anpassen und leicht header:

<item data="itemData"> 
    <header>My header</header> 
    <footer>My custom footer</footer> 
</item>

Mein Problem entsteht, wenn ich versuche, dass Elemente anpassen, wenn <listing> verwenden. Wenn ich so etwas wie diese:

<listing items="myItems"> 
    <item-content> 
     <header>{{ item.name }}</header> 
     <footer>My custom footer for {{ item.name }}</footer> 
    </item-content> 
</listing>

Es funktioniert nicht, weil die <item-content> in <item> eingefügt wird, aber <header> und <footer> nicht transkludiert in ihre richtigen Plätze bekommen, und sie können den item Umfang Variable nicht gelesen . Gibt es einen Weg, dies zu erreichen?

Quelle

2016-02-10 Javier Marín

Können Sie einen Plnker oder Geige dafür erstellen? Ich würde gerne ein bisschen mehr in diese Angelegenheit schauen. – Beyers

Hier ist es: https://plnkr.co/edit/r6byzhFX5m674ONhH1JS?p=preview –

Soweit ich sehen kann, was Sie versuchen zu tun, wird nicht funktionieren. Entwurfseigenschaft ändert die Art der Verschachtelung von Bereichen. Sie sieht vor, dass der Inhalt einer abgeleiteten Richtlinie außerhalb der Richtlinie liegt, und nicht der Bereich, der sich innerhalb der Richtlinie befindet. Es gibt dem Inhalt Zugriff auf den äußeren Bereich. In diesem Beispiel greift der übertragene Inhalt innerhalb '' und '' auf den Controller-Bereich zu.Es könnte eine Möglichkeit geben, dies zu umgehen, indem der 'transcludeFn' -Parameter von' link' verwendet wird. Aber ich bin mir nicht sicher, wie 'transcludeFn' mit der Multi-Slot-Funktion funktioniert. – Beyers

Zuerst in der Liste Vorlage sollten Sie ng-transclude-slot="itemHeader" von ng-transclude="itemHeader" und ng-transclude-slot="itemFooter" von ng-transclude="itemFooter" ändern, um die Transclusion zu arbeiten.

Dann haben Sie in Einzel- und Listenbeispiel einen Fehler. Wenn Sie in dem mitgelieferten Plunkr {items[0].name} durch das erwartete {data.name} in dem einzigen Beispiel ändern, werden Sie sehen, dass der Name nicht mehr angezeigt wird. Das zweite, was zu tun ist, ist dieses Problem zu beheben.

Quelle

2016-02-16 22:38:31 atfornes

Das stimmt, ich benutzte 'ng-transclude-slot', wenn' ng-transclude' verwendet werden sollte. Ich habe den Plunker aktualisiert. Irgendeine Idee, wie man das geteilte Problem löst? –

bitte sehen, wenn folgende Fragen helfen können: http://stackoverflow.com/questions/18794968/angular-directive-transclusion-and-inheritance und http://stackoverflow.com/questions/14049480/what-are-the-nuances -of-scope-prototypisch-prototypisch-Vererbung-in-angularjs – atfornes

TL; DR; Beispiel: https://plnkr.co/edit/1ideOiohle8AEzkDJ333?p=preview

Das grundlegende Problem, das Sie bei dem Übernehmen haben, ist, dass der Bereich, auf den Sie Zugriff haben, der Bereich der höchsten Ebene ist. Was Sie wollen, ist der Verweis auf den Umfang der Artikelebene von außerhalb der Richtlinie.

Also, anstelle der Einführung in die Listing-Direktive, binde ich eine Zeichenfolge Vorlage als ein Attribut. Ich muss eine Kompilierfunktion verwenden, um den unbearbeiteten Zeichenfolgenwert aufzunehmen, bevor eckig die {{}} Platzhalter herauszieht, und dann verwende ich $interpolate, um die Vorlagenfunktionen itemHeaderTemplate und itemFooterTemplate zu erstellen, die dann in der Vorlage wie ng-bind-html="itemHeaderTemplate({item: item})" verwendet werden.

Hinweis: Um ng-bind-html zu verwenden, müssen Sie das Modul ngSanitize einbeziehen, sonst erhalten Sie eine Sicherheitsausnahme.

Quelle

2016-04-13 14:27:06 Isaac

Mehrstufige Einbindung in Angular 1,5

Antwort

Verwandte Themen