如何在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操作？

- plondon

---

是的，你可以使用指令，或者在这种情况下，你需要一个带有一些作用域属性标志的简单ngClass。 - dfsq

除非值得，否则您必须重构代码。 - vinayakj

Answer 1

是的，操纵DOM的代码不应该出现在Angular控制器中，而应该放在指令中。

使用Angular的另一个优点是有许多好的现成指令可用。因此，如果您要对事情进行重构，可以尝试使用其他人的指令来加快速度。

话虽如此，这听起来是一项艰巨的工作。您需要通知付款人并与他们讨论重构的利弊。

- flup

Answer 2

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

以及部分

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

- vinayakj