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不是一个好主意，那么推荐使用上述“resize”的方法是什么？

Answer 1

Angular主要用于功能，而不是直接的DOM操作。您可能已经注意到，您根据其模型而不是ID访问元素。你不需要Angular应用程序中的任何id，如果某些html位改变，它会更容易。只要模型保持不变，你就可以用html做你想做的事。

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

我会尽量保持良好的分离，控制器非常薄。如果你以这种方式编码，那么测试事情会更容易，因为你不必再担心控制器了。希望这是有道理的。

Answer 2

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

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

使用控制器：操纵DOM

2 个答案: