Come implementare correttamente la manipolazione DOM in Angolare?

Question

Mi è stato recentemente assegnato il compito di sostituire e ripulire un progetto Angolare che è già completo e in produzione. Questa è la prima volta che utilizzo Angular.

Tutto quello che ho letto finora su angolare ...

• 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/

... Sembrano tutti dicono la stessa cosa di un angolare architettura dell'app. In particolare:

I controllori non devono mai manipolare DOM o tenere selettori DOM; ecco dove entrano le direttive e l'uso di ng-model.

Tuttavia, il progetto a cui sono stato assegnato sembra ignorarlo completamente. Ad esempio, un estratto dal MenuController:

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

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

    ... 
    }); 
}()); 

Devo spostare questo codice (e un sacco di altro codice) alle direttive? O dovrei seguire lo schema che l'applicazione ha già stabilito e continuare a manipolare DOM nei controller?

Answer 1

Sì. Il codice che manipola il DOM non ha business nel controller angolare e appartiene a una direttiva.

Un altro vantaggio dell'uso dell'angolare è che ci sono molte direttive già pronte disponibili. Quindi, se hai intenzione di refactoring comunque, potresti voler vedere se puoi accelerare le cose usando le direttive di altre persone.

Detto questo, sembra molto lavoro. Dovrai informare chi sta pagando e discutere i pro e i contro del refactoring con loro.

Answer 2

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

ed in parziale

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