Izolowane zakres prostych angularjs zagnieżdżone dyrektywy

Question

Please check this plnkr

Przeczytałem everyhting można znaleźć o dyrektywach, zakresu i odosobnionych zakresów. Ale nadal nie mogę zrozumieć, jak to działa.

Wytworzona przeze mnie dyrektywa działa doskonale, o ile nie jest zagnieżdżona w innej dyrektywie.

Po zagnieżdżeniu atrybuty "localFunc:" & łączą się z obszarem kontrolera zewnętrznego, ale zakres "localAttr:" = attr "" kończy się niepowodzeniem.

Zawsze będę wdzięczny za to, że ktoś może mi pomóc zrozumieć, dlaczego.

Answer 1

Obrazowo, oto co się zakresy wyglądać zanim wpisać do dowolnego pola tekstowego:

Zauważ, że wyizolować zakres 006 rodzic jest dołączany zakres, który jest tworzony przez dyrektywy container. Jako taki, searchText w zakresie 006 będzie databound do zakresu 005 (a nie zakresu 003), ponieważ jest używany prymityw.

Jeżeli wpiszemy 11 do pierwszego pola tekstowego i 22 do drugiego pola tekstowego i badać zakresy kolejny możemy zobaczyć gdzie wiązania z danymi odbyło:

searchforThis2 jest zabarwiony na żółto w zakresie 005 aby wskazać, że została utworzona nowa właściwość. Stało się tak dlatego, że używany jest prymitywny - zakres 005 nie używa tu prototypowego dziedziczenia, po prostu tworzy on na sobie nową prymitywną właściwość (tj. Nie szuka w zakresie 003 nazwy właściwości). Pozostałe żółte elementy wskazują, że wartości pierwotne uległy zmianie.

Jak już odkryłeś, najlepszym rozwiązaniem tego problemu jest powiązanie z właściwościami obiektu (a nie z elementami pierwotnymi) w zakresie nadrzędnym (tj. Zakres 003).

stosując następujące w kontrolerze:

$scope.obj = {searchforThis1: "Sample Text 1", searchforThis2: "Sample Text 2"}; 

w kodzie HTML:

<search searchtext="obj.searchforThis1"...> 
... 
<div container> 
    <search searchtext="obj.searchforThis2"...> 

Zakresy teraz wyglądać następująco:

Jeżeli wpiszemy 11 Into the najpierw pole tekstowe i 22 do drugiego pola tekstowego i ponownie zbadaj zasięgi, możemy zobaczyć, gdzie on Databinding odbyło:

Ponieważ zakres 006 to zakres izolat, wykorzystuje swoje $parent dostać się do zakresu 005 (jak wyżej). Stamtąd jednak dziedziczenie prototypowe jest w grze, ponieważ nie używamy prymitywów. Właściwość obiektu searchforThis2 znajduje się w zakresie 003.

Answer 2

Nigdy nie zawiedzie. Godziny googlowania nie pojawiają się, dopóki naprawdę nie wpisuję pytania, a następnie otrzymuję kombinację słów kluczowych wyszukiwania i voila! odpowiedź pojawia się.

Dzięki this very illuminating post dowiedziałem się, że mój problem jest tak powszechny, że rozwiązanie ma nawet nazwę - "Reguła punktowa".

Zasadniczo należy odwołać się do dziedziczonego obiektu na kontrolerze, a nie do właściwości, a problem znika.