16

Nie jestem pewien, czy jest to rzeczywiście możliwe, ale zasadniczo chcę odwrócić zakres izolatu "&" w AngularJS. Oto Plunkr do wykazania.Zakres izolatu dyrektywy dostępu z wewnątrz zawartości zawartej w translatach

Zasadniczo mam skonfigurowaną dyrektywę niestandardową, która dostarcza trochę kodu HTML wielokrotnego użytku. Korzysta z ng-transclude, aby umożliwić renderowanie zawartości zewnętrznej. Jednak znalazłem sytuację, w której chciałbym uzyskać dostęp do funkcji, która została ustawiona w zakresie izolatu dla dyrektywy, z wewnątrz translatowanej sekcji kodu.

Więc zasadniczo mam coś, co wygląda jak:

<div ng-controller="MainController"> 

    <!-- The directive --> 
    <div some-custom-directive> 

     <!-- Button 1 that invokes a method within the controller scope --> 
     <button id="button1" ng-click="invoke1()">Invoke from Controller</button> 

     <!-- Button 2 that invokes a method on the isolate scope for the custom directive --> 
     <button id="button2" ng-click="invoke2()">Invoke from Isolate Scope</button> 
    </div> 
</div> 

Czy ktoś wie, czy jest to rzeczywiście możliwe?

Aktualizacja

Jak na odpowiedź @Mark Rajcok, tym $$prevSibling znaleźć na $scope mogą być wykorzystywane w celu uzyskania dostępu izolatu zakresu dyrektywy od wewnątrz dołączany treści. Jednak zaktualizowałem powyższy Plunkr, aby spróbować tego z dyrektywy ng-repeat, która nie działa. Zakładam, że przedmioty z tego powtórzenia nie dziedziczą zakresu.

Odpowiedz

20

Chociaż możliwe, rozwiązanie przedstawiam to hack, ponieważ wykorzystuje zmienną wewnętrzną zakres, $$prevSibling.

Wewnątrz zawartości zawartej w transklycie znajduje się w zasięgu translatowanym. Zakresy izolatu i translatowane dyrektywy to rodzeństwo. Aby przejść z zakresu translatowanego do zakresu izolatu, można użyć $$prevSibling. (Aby przejść z zakresu izolatu do zakresu translatowanego, możesz użyć $$nextSibling.)

Tak, to będzie działać Hack:

<a href="" ng-click="$$prevSibling.action()">Invoke the Directive Action</a> 

wywołać metodę zakresu regulatora, trzeba określić, że używając & jak @ganaraj już udowodnione:

<content-presenter controller-action="action()"> 

Następnie w Twoja dyrektywa:

scope: { controllerAction: '&' }, 
template: ... + 
    '<button ng-click="controllerAction()">Trigger Ctrl action()</button>' ... 

Plunker


Z ng-repeat (patrz komentarz Samuela), każda pozycja tworzy zakres podrzędny zakreślonego zakresu. Na poniższym zdjęciu pokazuję tylko jeden obraz, aby zmniejszyć jego rozmiar. Odwróć brązową strzałkę $$ nextSibling dla $$ prevSibling.

enter image description here

Więc siekać dostać się do sposobu action() określonym zakresie na wyizolowanie z zakresu dziecięcej ng-repeat jest

<div ng-repeat="item in items" ng-click="$parent.$$prevSibling.action()"> 

Aktualizacja Kątowymi v1.3 +:

Od Angular v1.3, zakres zawarty jest teraz dzieckiem z izolatu dyrektywy zakres – nie są już rodzeństwem. Aby przejść z zakresu translatowanego do zakresu izolatu, użyj $parent.

NG-repeat, każda pozycja nadal tworzy zakres dziecko z dołączany zakresie:

enter image description here

Ale aby dostać się do sposobu action() określonej na wyizolowanie zakresu z zakresu dziecięcej ng-repeat, my teraz używać

<div ng-repeat="item in items" ng-click="$parent.$parent.action()"> 
+0

Pozdrawiam, to zadziałało. Jednakże odkryłem, że to nie działa z 'ng-repeat' (zakładam, ponieważ każdy element nie dziedziczy' $ scope' od kontrolera.Czy jest tak, że każdy element może uzyskać dostęp do '$$ prevSibling '? Zaktualizowałem powyższy Plunkr, aby podać przykład: –

+0

@SamuelSlade, zobacz moją zaktualizowaną odpowiedź (z obrazkiem) –

+0

Genialny, działa jak czar! Dziękuję za diagram, bardzo pouczający –

1

Oto pluna, która rozwiązuje obecny problem. Nie jestem pewien, co próbujesz zrobić. Ale o ile wiem, nie ma możliwości wywołania czegoś w zakresie izolatu z zewnętrznego zakresu. Oczywiście, możesz ustawić dwukierunkową powiązaną zmienną między zakresem izolatu i zasięgiem zewnętrznym, zmienić zmienną w zakresie zewnętrznym i $ uważać na nią w zakresie izolatu (zadziała to tak, jak mechanizm zdarzenia) ... To jest jeden sposób robienia tego, co próbujesz zrobić, jeśli nalegasz na to.

Alternatywnie istnieje mechanizm wywoływania funkcji w zakresie zewnętrznym z zakresu izolowania. To trochę jak oddzwanianie.

Zobacz ten http://plnkr.co/edit/5MT4vo9qXtV6nQikfEiH?p=preview

1

to jest moje zrozumienie, że dodanie ng-repeat do elementu tworzy nowy zakres, aby powtarzająca się poprawnie treść związana. Możesz potrzebować dodatkowego $parent w tym łańcuchu, na przykład $parent.$$nextSibling, aby zbliżyć się do poziomu, który sąsiaduje z zakresem izolatu dyrektywy.

Powiązane problemy