Zachowanie kontrolera wewnątrz dyrektyw

Question

Wiem, że $scope z controller może być udostępniony do funkcji łącza w directives.

Na przykład, w tym kodzie mogę wywołać funkcję od deklarowanej kontrolera do wydrukowania „Hello World” na konsoli przeglądarki:

.directive('myDirective', [function() { 
     return { 
      restrict : 'E', 
      replace : true, 
      controller: 'MyController', 
      templateUrl : 'directives/myDirective.tpl.html', 
      link : function (scope, elem, attrs, controller) { 
       scope.message = 'Hello World!'; 
      } 
     }; 
    }]) 

    .controller('MyController', [function ($scope, $element, $attrs, $log, $timeout) { 

     // $timeout to wait the link function to be ready. 
     $timeout(function() { 
      // This prints Hello World as expected. 
      $log.debug($scope.message); 
     }); 


     }); 
    }]) 

Ok, to działa prawidłowo.

Moje pytania są:

1. W tym podejściu jest to SAME zakres które będą dzielone pomiędzy kontrolerem a dyrektywą?
2. Jakie są konsekwencje zastosowania tego podejścia? Załóżmy, że będę nie manipulować DOM elementów w controller, tylko w link function.
3. Naprawdę muszę unikać manipulowania elementami DOM w tym controller? Nawet jeśli numery $scope, $elem itp. Są takie same?

Oto pytania, których nie znalazłem na Angular Directive documentation.

Here's a plunker with the sample code.

Answer 1

W ramach tego podejścia jest to, że zakres SAME będą dzielone pomiędzy kontrolerem a dyrektywą?

Tak, jest.

Jakie są konsekwencje zastosowania tego podejścia? Załóżmy, że nie będę manipulował elementami DOM w kontrolerze, tylko w funkcji łącza.

Sterownik zapewnia zachowanie dyrektywy, podobnie jak w przypadku zwykłej aplikacji kątowej. Powiedziawszy, powinieneś manipulować lunetą tylko w funkcji kontrolera. Jeśli chcesz zmienić zasięg z funkcji łącza, wywołaj metodę tego. Poza tym, ponieważ kontroler jest wykonywany przed funkcją łącza, powinieneś zainicjować zakres w pierwszym, aby ten drugi mógł uzyskać prawidłowy model do pracy.

Naprawdę muszę unikać manipulowania elementami DOM w tym kontrolerze? Nawet jeśli $ scope, $ elem itp. Są takie same?

Z definicji funkcja łączenia jest miejscem wykonywania operacji DOM. Nie mogę znaleźć przyczyny technicznej, która uniemożliwiłaby ci manipulowanie DOM w kontrolerze dyrektywy, z wyjątkiem tego, że nie powinieneś. W rzeczywistości, aby sprawdzić, czy właśnie zmieniłem jedną dyrektywę, napisałem i przeniosłem cały kod z funkcji łącza do funkcji kontrolera i wszystko działało. Ale jeśli połączysz zarówno logikę zasięgu, jak i manipulację DOM, myślę, że trudno będzie wytropić to, co się dzieje.

Wreszcie ten artykuł może być przydatny: Understanding Directives.

Answer 2

Zobacz aktualne plunker: http://plnkr.co/edit/pT8rEDz7gWKUPYIZhUYA?p=preview

1. Tak, to jest samo zakres. Identyfikatory są takie same i widać, że zawartość została zaktualizowana.
2. Konsekwencje wspólnego zakresu polegają na tym, że trudno jest ustalić, kto co zmienił. Gorąco polecam, aby twoje dyrektywy używały zakresu izolowania.
3. Zapraszam do manipulowania DOM. Śledzenie zmian będzie zabawnym ćwiczeniem ... Polecam również wbrew wszelkim manipulacjom DOM. Segregowałbym manipulacje DOM z innych działań, zawijając je w dyrektywę.

Jedną z mocnych stron Angular są dyrektywy, więc użyłbym ich wszędzie tam, gdzie to możliwe, aby oddzielić swoje obawy.

Answer 3

1) Tak obaj dzielić ten sam zakres, ponieważ używasz kontrolera dyrektywy zalogować zakresu, co oznacza, że ​​można umieścić „MyController” wewnątrz dyrektywy jak tak

return { 
    replace: true, 
    controller: function($scope,...){ // equals MyController 
    } 
} 

Jeśli kontroler jest opakowaniem dyrektywy zamiast wewnątrz niej, a zakres dyrektywy jest ustawiony na wartość true lub wartość mieszania obiektu, to nie będą one miały tego samego zakresu.

2) Brak konsekwencji, po prostu NIE manipulować DOM w kontrolerze, jednym z zastosowań kontrolera jest połączenie dyrektyw, aby uzyskać lub ustawić dane z być może usługi lub poprzez proste rozszerzenie zakresu (ie: scope.message = "Hello World") tak czy inaczej muszą być minimalne. Sposób, w jaki konfigurujesz to ustawienie jest idealny, jeśli chcesz udostępniać dane między innymi dyrektywami, możesz po prostu wymagać kontrolera tej dyrektywy.

3) Tak uniknąć manipulacji DOM w sterowniku, jego nie oznaczało dla logiki prezentacji lub co użytkownik widzi, że jest rola dyrektyw, pamiętaj SOC (separacji obaw) każdą część MVC/MV * wzór ma własną rolkę do grania.

Pomyśl o tym w prosty sposób, taki jak ten użytkownik widzi przycisk na warstwie prezentacji, przycisk kliknięcia użytkownika, funkcja kliknięcia przycisku pojawia się na warstwie biznesowej (kontroler), która pobiera wyniki i zapisuje dane/model warstwa.

Zastrzeżenie jeśli przycisk robi coś innego niż przetwarzać polecenia (obliczenia, oceny, itp) pomiędzy użytkownikiem a warstwy danych, takich jak dodawanie zajęciach (manipulacji DOM), które należy funkcja wewnątrz dyrektywy.

Wielki odczytu i bardziej dogłębnie here