Jak prawidłowo zaimplementować manipulowanie DOM w Angular?

Question

Niedawno przydzielono mnie do przejęcia i oczyszczenia projektu Angular, który jest już kompletny i jest produkowany. To mój pierwszy kontakt z Angular.

Wszystko, co do tej pory na kątowa czytać ...

• https://www.airpair.com/angularjs/posts/top-10-mistakes-angularjs-developers-make
• http://nathanleclaire.com/blog/2014/04/19/5-angularjs-antipatterns-and-pitfalls/
• http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/

... Wydają się wszyscy mówią to samo o kątowym architektura aplikacji. Przede wszystkim:

Kontrolery nigdy nie powinny wykonywać manipulacji DOM ani przytrzymywać przełączników DOM; to tutaj wkraczają dyrektywy i używanie modelu ng.

Jednak projekt, który został mi przydzielony, wydaje się całkowicie ignorować to. Na przykład, wyciąg z MenuController:

(function() { 
    app.controller('MenuController', function($scope) { 
    ... 

    $scope.openMenu = function() { 
     $('.off-canvas-wrap').addClass('offcanvas-overlap-right'); 
    }; 

    ... 
    }); 
}()); 

powinienem przenieść ten kod (i wiele innych kodów) z dyrektywami? A może powinienem postępować zgodnie ze wzorem, który aplikacja już ustanowiła i kontynuować manipulowanie DOM w kontrolerach?

Answer 1

Tak. Kod, który koliduje z DOM, nie ma żadnego interesu w regulatorze kątowym i należy do dyrektywy.

Inną zaletą zastosowania kątowego jest to, że dostępnych jest wiele dobrych gotowych dyrektyw. Więc jeśli zamierzasz zrestrukturyzować rzeczy tak czy inaczej, możesz chcieć sprawdzić, czy możesz przyspieszyć działanie, używając dyrektyw innych ludzi.

To powiedziawszy, brzmi jak dużo pracy. Będziesz chciał poinformować, kto płaci na ten temat i omówić z nimi zalety i wady refaktoryzacji.

Answer 2

$scope.openMenu = function() { 
     $scope.newClass = 'offcanvas-overlap-right'; 
    }; 

iw częściowym

<div class="off-canvas-wrap" ng-class="newClass"></div>