使用控制器执行以下操作: 操作 DOM

Question

我有一个ng-repeat-end-watch指令

.....
return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                scope.$evalAsync(attr.ngRepeatEndWatch);
            }
        }
    }

在我的标记上，我有

<div ng-repeat="(i, tile) in tiles" class="w3-col tile tile-{{tile.number}}" ng-repeat-end-watch="ctlr.resize()" ng-model="tile">

在我的控制器上，我有

  rowsColumns = Math.round(Math.sqrt($scope.tiles.length)), widthHeight = $window.screen.availHeight/rowsColumns;
ctlr.resize = function(){
        angular.element('.w3-col').width(widthHeight).height(widthHeight);
      };

如果在 AngularJS 的开发人员指南中，它建议您不要使用控制器来操作 DOM 元素

如果使用控制器来操作 DOM 不是一个好主意，建议应用上述"调整大小"的方法是什么？

Answer 1

Angular 主要用于功能，而不是直接的 DOM 操作。您可能注意到，您访问元素是基于其模型而不是 id。在 Angular 应用程序中，您不需要任何 id，这使得某些 html 位发生变化会更容易。只要模型保持不变，您就可以使用 html 做您想做的事。

话虽如此，如果您确实需要访问 DOM，您仍然可以这样做。例如，您可以在控制器自己的 js 文件中将执行该操作的代码放在控制器外部。然后，您可以将其注入为 Angular 服务，并在您想要的任何控制器中重用它。

我会尽量把东西分开，控制器很薄。如果您以这种方式编写代码，那么测试事情会更容易，因为您不再需要担心控制器。希望这是有道理的。

Answer 2

处理它的最佳方法是编写自己的指令。
事实上，指令是Angular.js中最强大的概念之一。

将其视为可重用的组件：不仅适用于jQuery插件，还适用于在多个位置使用的任何（子）控制器。
这有点像影子DOM。最好的部分是，您的控制器不需要知道指令的存在：通信是通过范围共享和$scope事件实现的。