如何在Angular中正确实现DOM操作？

Question

我最近被指派接管并清理已经完成并正在生产的Angular项目.这是我第一次使用Angular.

到目前为止我在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/

...似乎所有人都对Angular应用程序的架构说了同样的话.最值得注意的是:

控制器永远不应该进行DOM操作或保持DOM选择器; 这就是指令和使用ng-model的地方.

但是,我被分配的项目似乎完全忽略了这一点.例如,MenuController的摘录:

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

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

    ...
  });
}());

我应该将此代码(和许多其他代码)移动到指令吗？或者我应该遵循应用程序已经建立的模式并继续在控制器中进行DOM操作？

Answer 1

是.摆弄DOM的代码在角度控制器中没有业务,属于指令.

使用角度的另一个优点是可以使用许多好的现成指令.因此,如果你要重构一些东西,你可能想看看你是否可以通过使用其他人的指令加快速度.

这就是说,这听起来像是很多工作.您需要告知谁为此付费,并与他们讨论重构的利弊.