javascript - 如何在 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 应用程序的架构说了同样的话。最值得注意的是:

Controllers should never do DOM manipulation or hold DOM selectors; that's where directives and using ng-model come in.

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

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

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

    ...
  });
}());

我应该将这段代码(以及许多其他代码)移到指令中吗？或者我应该遵循应用程序已经建立的模式并继续在 Controller 中进行 DOM 操作？

Answer 1

是的。摆弄 DOM 的代码与 Angular Controller 无关，属于指令。

使用 Angular 的另一个优势是有许多现成的指令可用。因此，如果您无论如何都要重构，您可能想看看是否可以通过使用其他人的指令来加快速度。

也就是说，这听起来工作量很大。您需要通知为此付费的任何人，并与他们讨论重构的利弊。