Zarządzanie komunikacją między niezależnymi dyrektywami AngularJS niezależnie

Jest to bardziej podejście organizacyjne do rozwiązania tego problemu niż bezpośrednie rozwiązanie. Moje pytanie jest takie, że jeśli mam dwie dyrektywy, które nie są od siebie zależne i mogą działać niezależnie, aby służyć ich celom. Ale jeśli jedna z dyrektyw jest obecna, druga musi zostać wykonana, gdy druga jest gotowa. W takim przypadku, jaki byłby logiczny sposób, aby upewnić się, że działa w ten sposób bez konieczności kodowania jakichkolwiek wywołań funkcji lub zdarzeń?

Powiedzmy na przykład, że masz jedną dyrektywę, która tworzy pewnego rodzaju siatkę:

angular.module('App').directive('appGrid',function() {
  return function($scope, element) {
    $scope.rows = ...
  };
});

Następnie mam kolejną dyrektywę, która sprawia, że ​​element jest przewijany w poziomie:

angular.module('App').directive('appPane',function() {
  return function($scope, element) {
    element.attachHorizontalScroll();
  };
});

Przykład mojego kodu HTML wyglądałby następująco:

<div data-app-grid data-app-pane>
  <div data-ng-repeat="row in rows">
    <div data-ng-repeat="cell in row.cells">
      {{ cell.data }}
    </div>
  </div>
</div>

ZasadniczoappPane dyrektywa musi działać poappGrid dyrektywa została wykonana, a tabela jest gotowa.

Jednym z rozwiązań, które mogę sobie wyobrazić, jest oglądanie danych, aby zobaczyć, kiedy jest gotowe do użycia$scope.$watch Metoda ta stwarza jednak problem, ponieważ zmiana może nastąpić wiele razy i byłoby to kiepskim projektem, aby nadmiarowo aktualizować stronę, a także stwarza problem, jeśli wiele dyrektyw zapisuje do tej samej zmiennej zakresu, która jest obserwowana.

Inne rozwiązanie polega na tym, że pierwsza dyrektywa emituje zdarzenie (coś takiego jak elementReady), a następnie druga dyrektywa przejmuje kontrolę. Ale co, jeśli nie ma pierwszej dyrektywy? Więc w jaki sposób druga dyrektywa będzie wiedziała, kiedy wykonać tę pracę? Może istnieć inna dyrektywa, która jest w zasadzie pustą dyrektywą, która po prostu wywołuje zdarzenie dla wszystkich innych elementów, ale jest to trochę hack. Również to, co się stanie, jeśli wiele innych dyrektyw wyłączyelementReady zdarzenie?

Jeszcze jedno rozwiązanie polega na stworzeniu trzeciej dyrektywy, która dzieli logikę między dwiema dyrektywami za pośrednictwem usługi współdzielonej. Ale to sprawia, że ​​trzecia dyrektywa w pełni opiera się zarówno na innych dyrektywach, jak i na wspólnych usługach między nimi. Wymaga to również więcej, niepotrzebnego kodu testowego, a także rzeczywistego kodu do napisania dyrektywy (znacznie więcej kodu w porównaniu z drugim rozwiązaniem, które wymagałoby tylko jednej + jednej linii kodu).

Jakieś pomysły?

questionAnswers(3)

yourAnswerToTheQuestion