Wielopoziomowe dołączony w Kątowymi 1,5

mam rodzajowe dyrektywę <item>, a dyrektywa <listing> z filtrów i narzędzi paginacji za wystawianie że <item>:Wielopoziomowe dołączony w Kątowymi 1,5

Przykład: https://plnkr.co/edit/r6byzhFX5m674ONhH1JS?p=preview

Szablon <listing> jest coś takiego:

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

Dyrektywa <item> używa nowego kątowa 1,5 multi-gniazda transkluzja dostosować stopki i nagłówka łatwo:

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

Mój problem pojawia się, gdy staram się dostosować, że przedmioty przy użyciu <listing>. Jeśli używam coś takiego:

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

To nie działa, ponieważ <item-content> zostanie wstawiony <item>, ale <header> i <footer> nie dostać dołączany do ich właściwego miejsca i nie może odczytać zmienną item zakres . Czy jest jakiś sposób, aby to osiągnąć?

Źródło

2016-02-10 Javier Marín

Czy możesz stworzyć do tego piewcę lub skrzypce? Chciałbym zajrzeć do tej kwestii nieco więcej. – Beyers

Tutaj jest: https://plnkr.co/edit/r6byzhFX5m674ONhH1JS?p=preview –

O ile widzę, co próbujesz zrobić, nie będzie działać. Zgodnie z projektem, należy przekształcić zmiany w sposób zagnieżdżenia zasięgów. Sprawia, że treść zawartej w niej dyrektywy ma zasięg poza zakresem dyrektywy, a nie jakikolwiek zakres znajduje się w środku. Daje dostęp do zawartości do zewnętrznego zakresu. Tak więc w twoim przykładzie translatowana zawartość wewnątrz '' i '' uzyskuje dostęp do zakresu kontrolera.Może istnieć sposób obejścia tego, używając parametru 'transcludeFn' w' link'. Ale nie jestem pewien, jak 'transcludeFn' działa z funkcją multi-slot. – Beyers

Po pierwsze, w szablonie aukcji należy zmienić ng-transclude-slot="itemHeader" przez ng-transclude="itemHeader" i ng-transclude-slot="itemFooter" przez ng-transclude="itemFooter", aby włączyć działanie transclusion.

Następnie masz w jednym i podać przykład błędu. Jeśli zmienisz podany plunkr {items[0].name} przez oczekiwany {data.name} w jednym przykładzie, zobaczysz, że nazwa nie jest już wyświetlana. Drugą rzeczą do zrobienia jest naprawienie tego wspólnego problemu.

Źródło

2016-02-16 22:38:31 atfornes

To prawda, użyłem 'ng-transclude-slot', gdy' ng-transclude' powinien być użyty. Zaktualizowałem plunkera. Każdy pomysł na temat rozwiązania wspólnego problemu? –

, proszę sprawdzić, czy następujące pytania mogą pomóc: http://stackoverflow.com/questions/18794968/angular-directive-transclusion-and-inheritance i http://stackoverflow.com/questions/14049480/what-are-the-nuances -of-scope-prototypal-prototypical-inheritance-in-angularjs – atfornes

TL; DR; Przykład roboczy: https://plnkr.co/edit/1ideOiohle8AEzkDJ333?p=preview

Podstawowym problemem, który napotykasz, jest to, że podczas transkrybucji zasięg, do którego masz dostęp, jest zasięgiem najwyższego poziomu. To, czego chcesz, to odniesienie się do zakresu poziomu przedmiotu spoza dyrektywy.

Dlatego zamiast używać transclusion w dyrektywie listing, wiążę szablon łańcuchowy jako atrybut. Muszę użyć funkcji kompilacji, aby odebrać nieprzetworzoną wartość ciągu, zanim kątowe wyciągnie znaczniki zastępcze {{}}, a następnie użyję $interpolate do utworzenia funkcji szablonów, które są następnie używane w szablonie takim jak ng-bind-html="itemHeaderTemplate({item: item})".

Uwaga: Aby użyć ng-bind-html, musisz dołączyć moduł ngSanitize lub uzyskasz wyjątek bezpieczeństwa.

Źródło

2016-04-13 14:27:06 Isaac

Wielopoziomowe dołączony w Kątowymi 1,5

Odpowiedz

Powiązane problemy