How to implement DOM manipulation in Angular?

Question

Recently, I was instructed to take over and clean the Angular project, which has already been completed and launched. This is my first time using Angular.

Everything I've read so far on Angular ...

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

... Everyone seems to be talking about the architecture of the Angular application. First of all, these are:

Controllers should never perform DOM manipulations or hold DOM selectors; that when directives and use of the ng model come in.

However, the project that was assigned to me completely ignores this. For example, an excerpt from MenuController:

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

Should I move this code (and many other code) into directives? Or should I follow the pattern that the application has already installed and continues to manipulate the DOM in controllers?

Answer 1

Yes. The code that works with the DOM does not work in the angular controller and belongs to the directive.

Another advantage of using angular is that there are many good ready-made directives. Therefore, if you are going to reorganize things in any way, you can see if you can speed things up with other directives.

However, that sounds like a lot of work. You want to tell who pays for it and discuss the pros and cons of refactoring with them.

Answer 2

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

and in partial

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