Czy można używać $$ prevSibling w celu uzyskania dostępu do danych zakresu w dyrektywie "transcluded"?

Question

Moja dyrektywa konfiguracja jest następująca:

<div data-directive-a data-value="#33ff33" data-checked="true"> 
    <div data-directive-b></div> 
</div> 

• Używam transkluzja celu zapewnienia directiveB zostanie wygenerowana.
• directiveA ma pole wyboru, które ma na celu zmianę pewnej wartości za każdym razem, gdy jest zaznaczone.
• ta wartość musi być dostępna w zakresie directiveA i directiveB.

Udało mi się to zrobić, ale tylko przez odniesienie $$prevSibling - czy istnieje lepszy sposób?

Oto kod: http://jsfiddle.net/janeklb/yugQf/ (w tym przykładzie, klikając pole wyboru jest po prostu znaczy "czysty" wartość)

-

Nieco bardziej głębokość: The 'treść' z directiveA (to, co jest w nim translatowane) nie zawsze jest directiveB. Inne dyrektywy, takie jak directiveB, również tam się znajdą. "Typy" directiveB będą zawsze używane w ciągu directiveA.

Answer 1

Aby uniknąć zbytniego łączenia elementów za dużo, unikałbym używania $$prevSibling. Najlepsze rozwiązanie, ponieważ oczekuje się, że twoje komponenty w wersji directiveB będą używane w komponentach directiveA, to użycie require.

.directive('directiveB', function() { 
    return { 
    require: '^directiveA', 
    scope: true, 
    link: function (scope, element, attrs, directiveA) { 
     scope.obj = directiveA.getObj(); 
    } 
    }; 
}) 

^require wskazuje, że gdzieś na element niniejszej dyrektywy lub na dowolnym elemencie nad nim w hierarchii DOM jest dyrektywa zwana directiveA i chcemy zadzwonić metod na swoim kontrolerze.

.directive('directiveA', function() { 
    return { 
    // ... 
    controller: function ($scope) { 
     // ... 
     this.getObj = function() { 
     return $scope.obj; 
     }; 
    } 
    }; 
}) 

Więc teraz w directiveB można użyć ng-model="obj.attr".

Istnieje wiele różnych wariantów, ale biorąc pod uwagę ogólne pytanie, uważam, że jest to najlepsze podejście. Oto zaktualizowany Fiddle: http://jsfiddle.net/yugQf/7/.

Answer 2

@Josh wspomniano w swojej odpowiedzi, że

Najlepszym rozwiązaniem, ponieważ swoimi directiveB -jak komponentów oczekuje się zużyć w ciągu directiveA składników jest użycie require.

byłem bawiąc się tym i uważam, że kontroler na directiveA jest tylko rozwiązaniem (tak +1 Josh). Oto co zakresy wyglądać użyciu PO za skrzypce (. Odwrócić brązową strzałkę i masz $$ previousSibling zamiast $$ nextSibling)

Inne niż $$previousSibling, zakres 004 ma ścieżki do izolacji zakres 003.Zauważ, że zasięg 004 jest zasięgiem transcluded, który tworzy directiveA, a ponieważ directiveB nie tworzy nowego zakresu, ten zakres jest również używany przez directiveB.

Ponieważ obiekt, który chcesz udostępnić z directiveB, jest tworzony w kontrolerze directiveA, nie możemy również używać atrybutów do udostępniania danych między dyrektywami.

---

Tworzenie modelu wewnątrz dyrektywy, a następnie udostępnianie tego modelu na zewnątrz jest raczej nietypowe. Zwykle będziesz chciał zdefiniować swoje modele poza swoimi dyrektywami, a nawet poza swoimi kontrolerami (listen for a few minutes to Misko). Usługi są często dobrym miejscem do przechowywania modeli/danych. Kontrolery powinny zazwyczaj odwoływać się do części modeli, które muszą być rzutowane na widok, z którym są powiązane.

Dla uproszczenia, zamierzam zdefiniować model na kontrolerze, wtedy dyrektywy będą miały dostęp do tego modelu w normalny sposób. Dla celów pedagogicznych, directiveA nadal będzie używać zakresu izolowania, a directiveB utworzy nowy zakres podrzędny, używając scope: new, jak w odpowiedzi @ Josha. Ale każdy typ (izoluj, nowe dziecko, bez nowego zakresu) i kombinacja będą działać, teraz, gdy mamy model zdefiniowany w zakresie nadrzędnym.

Ctrl:

$scope.model = {value: '#33ff33', checkedState = true}; 

HTML:

<div ng-controller="NoTouchPrevSibling"> 
    <div data-directive-a data-value="model.value" data-checked="model.checkedState"> 
     <div data-directive-b></div> 
    </div> 

Z innych powodów pedagogicznych, zdecydowałem się przejść dyrektywyświadectwo dwie cechy modela jako oddzielne atrybuty, ale cały model/obiekt mógł również zostać przekazany. Ponieważ dyrektywa B tworzy zakres podrzędny, nie musi przekazywać żadnych atrybutów, ponieważ ma dostęp do wszystkich właściwości zakresu nadrzędnego/kontrolera.

Dyrektywy:

app.directive('directiveA', function() { 
    return { 
     template: '<div>' 
      + 'inside parent directive: {{checkedState}}' 
      + '<input type="checkbox" ng-model="checkedState" />' 
      + '<div ng-transclude></div>' 
      + '</div>', 
     transclude: true, 
     replace: true, 
     scope: { 
       value: '=', 
       checkedState: '=checked' 
      }, 
    }; 
}); 
app.directive('directiveB', function() { 
    return { 
     template: '<div>' 
      + '<span>inside transcluded directive: {{model.checkedState}}</span>' 
      + '<input type="text" ng-model="model.value" />' 
      + '</div>', 
     replace: true, 
     scope: true 
    }; 
}); 

Celownik:

pamiętać, że zakres dziecko directiveB użytkownika (006) dziedziczy dołączany zakresie dyrektywyświadectwo'S (005).

Po kliknięciu na pole i zmieniając wartość w polu tekstowym:

Zauważ, że kątowe uchwyty aktualizację izolować właściwości zakresu. Normalny JavaScript prototypal inheritance zapewnia zakresowi dziecinnemu dyrektywy B dostęp do model w zasięgu kontrolera (003).

Fiddle