Oddzielanie manipulacji DOM od kontrolerów Angular - wymagane najlepsze praktyki

Question

Próba znalezienia "najlepszego" sposobu budowania aplikacji kątowej Znalazłem kilka artykułów z najlepszymi praktykami. Z tego wejścia Zrobiłem to:

angular.module('xApp', []) 
//..... some services, factories, controllers, .... 

.directive('dirNotification',[ function dirNotification() { 
    return { 
     scope: {}, 
     templateUrl: 'xNotification.html', 
     replace: true, 
     controller: 'CtrlNotification', 
     link: function($scope){ 
      // if this is 'DOM manipulation, should be done here ... ? 
      /* 
      $scope.$on('session.update',function(event, args) { 
       if (args == null) { 
        $scope.notificationdata.username = ""; 
        $scope.notificationdata.sid = ""; 
       } else { 
        $scope.notificationdata.username = args.username; 
        $scope.notificationdata.sid = args.accessToken; 
       } 
      }); 
      */ 
     } 

    }; 
}]) 
.controller('CtrlNotification',['$scope' ,function CtrlNotification($scope) { 

    $scope.notificationdata = { 
     username: "", 
     sid: "" 
    }; 

    // this is not real DOM manipulation, but only view data manipulation? 
    $scope.$on('session.update',function(event, args) { 
     if (args == null) { 
      $scope.notificationdata.username = ""; 
      $scope.notificationdata.sid = ""; 
     } else { 
      $scope.notificationdata.username = args.username; 
      $scope.notificationdata.sid = args.accessToken; 
     } 
    }); 

}]) 

Szablon HTML jest po prostu tak:

<div> 
    <p>{{notificationdata.username}}</p> 
    <p>{{notificationdata.sid}}</p> 
</div> 

Więc moje pytanie brzmi, zmiany danych powinny być uznane za manipulację DOM? Obecna wersja robiąca to w kontrolerze wydaje mi się bardziej praktyczna (na przykład ustawienie wartości domyślnych). Ponadto, jeśli dodaję do tego większą funkcjonalność, blok "link do dyrektywy" będzie rósł i będzie zawierał więcej funkcji niż definicji. Sądzę, że w dyrektywie należy wprowadzić takie zmiany, jak zmiana kolorów lub ukrywanie elementów w zależności od zakresu danych.

Co oznacza wspólnota? Czy zgadzasz się z moimi założeniami?

Dzięki Rainer

Answer 1

Jako dobry początek, przeczytaj ten SO question/answer.

Kontrolery:

Powodem nie należy robić manipulacji DOM (lub wyszukiwanie elementów DOM, lub dokonywania jakichkolwiek założeń na temat widoku, dla tej sprawy) w kontrolerze jest fakt, że intencją regulatora to radzić sobie tylko ze stanem aplikacji - zmieniając ViewModel - niezależnie od tego, w jaki sposób stan jest odzwierciedlony w widoku. Ten kontroler robi to reagując na zdarzenia z modelu i widoku i ustawiając właściwości ViewModel. Angular zajmie się odzwierciedleniem "stanu" aplikacji w Widoku z powiązaniami.

Tak, oczywiście, zmiana ViewModel powoduje, że widok reaguje, a DOM jest manipulowany, ale chodzi o to, że kontroler nie powinien wiedzieć, czy dokładnie reaguje na widok. Dzięki temu separacja spraw pozostaje nienaruszona.

dyrektywach:

Kiedy wbudowane w dyrektywach nie są wystarczające i wymagają ściślejszej kontroli o jak widok jest reakcji, to jest dobry powód, aby stworzyć dyrektywę niestandardową.

Dwie rzeczy do zapamiętania na temat dyrektyw.

1) Przydatne jest myślenie o dyrektywach jako składnikach wielokrotnego użytku, więc im mniejsza jest logika specyficzna dla aplikacji, tym lepiej. I zdecydowanie unikaj tam wszelkiej logiki biznesowej. Zdefiniuj wejścia i wyjścia (zwykle za pomocą atrybutów) i reaguj tylko na te. Detektory zdarzeń (takie jak Ty) są bardzo specyficzne dla aplikacji (chyba że niniejsza dyrektywa ma być używana z inną dyrektywą, która publikuje wydarzenie), więc lepiej, jeśli to możliwe, uniknij.

.directive("notification", function(){ 
    return { 
    restrict: "A", 
    scope: { 
     notification: "=" // let the attribute get the data for notification, rather than 
         // use scope.$on listener 
    }, 
    // ... 
    } 
}) 

2) Tylko dlatego dyrektyw „wolno manipulacje DOM” nie oznacza, że ​​należy zapomnieć o ViewModel-View separacji. Angular pozwala zdefiniować zasięg wewnątrz łącza lub funkcji kontrolera i dostarczyć szablon ze wszystkimi typowymi wyrażeń kątowych i powiązań.

template: '<div ng-show="showNotification">username:{{notification.username}}</div>', 

// controller could also have been used here 
link: function(scope, element, attrs){ 
    scope.showNotification = Math.floor(Math.random()* 2);  
}