Question

许多人告诉我在控制器中操作DOM是一件非常糟糕的事情，但究竟是什么原因。它如何影响您正在制作的应用程序？这样做的最佳实践是什么？如何完成？

Answer 1

对于大多数来自jQuery背景的开发人员，AngularJS需要进行重大的心理转变。

使用AngularJS时不进行jQuery样式DOM操作的主要原因是你的Angular应用程序不会意识到你使用jQuery对DOM做出的任何更改，因此你将无法绑定这些DOM元素进入任何模型而不进入主要的角度hackery。

至于最佳实践，我建议您使用http://codeschool.com上的全套教程来帮助您从“jQuery思维模式”跳跃到纯粹的Angular思维模式。

作为一个有角度的开发人员，我做过的最好的事情是完全从我的Angular项目中删除jQuery库，所以我不想回到我原来的错误方式。

但是为了更具体地回答你的问题，有很多方法可以在Angular应用程序中向DOM添加元素。如果你想弄清楚如何做一些“Angular Way”，我建议你发布一些代码和一个特定的问题。

完美的例子就像jQuery的append（）和remove（）。这些在Angular应用程序中没有位置，因为任何由jQuery附加的元素都不会被Angular的模型看到，这使得它们对应用程序本身无用。

因此，不是使用jQuery追加和删除，您可能想要使用ng-repeat指令呈现DOM元素（如果有多个类似的DOM元素需要追加）并使用添加DOM元素单击以向绑定ng-repeat指令的对象添加数据，或者如果没有要追加的多个类似元素，可能只需要使用ng-show或ng-if仅渲染DOM元素点击后。

以下是这两种方法的一个例子：
http://plnkr.co/edit/4MSOoTrGGom2DpGj00x4?p=preview

<body ng-controller="MainCtrl">
    <p ng-repeat="name in names">{{name}}</p>
    <form ng-submit="addName(newName)">
      <input ng-model="newName" type="text"/>
      <button type="submit">Add Name</button>
    </form>
    <br>
    <br>
    <h1 ng-show="showHeader">Header Element</h1>
    <button ng-show="!showHeader" ng-click="showHeader = !showHeader">Show Header</button>
    <button ng-show="showHeader" ng-click="showHeader = !showHeader">Hide Header</button>
  </body>

JS：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.names = ['Ramm', 'John', 'Keith', 'Susan', 'Janice'];

  $scope.addName = function(newName){
    $scope.names.push(newName);
  };

});

Answer 2

技术上控制器应该更小＆amp;紧凑，它不应该玩DOM。控制器只对拥有业务逻辑＆amp;在事件上调用的绑定级逻辑。

根据我的观点，“你不应该从控制器中操纵DOM ”背后的原因是，这只是因为关注的分离。如果你从控制器进行DOM操作，那么它会与你的控制器紧密耦合，＆amp;那段代码不能成为可重用的。因此，通过在指令中编写该代码，相同的代码可以很容易地成为一个可插拔的代码。可重用的组件。只需放置指令标记/元素，就可以在其他地方使用相同的DOM操作。

查看指令定义，然后您将分析它只是意味着使用DOM，因为它在使用preLInk函数＆amp;也可以在postLink函数中获得DOM的渲染。

同样指令使你可以使用指令元素，你不需要编译它，因为element已经用jQLite编译，{{1}}是角度中使用的jQuery的较小版本。这里不需要选择器来获取指令元素DOM。

Answer 3

您将在指令中操纵DOM元素。你必须了解这些事情，

指令： - 它们是用于处理和修改DOM的强大工具 .Angular将指令定义为用于DOM操作的代码块
控制器： - 控制器应该纯粹用于连接服务，依赖项和其他对象，并通过范围将它们分配给视图。当您需要在视图中处理复杂的业务逻辑时，它们也是一个很好的选择。
服务： - 服务主要是控制器之间的通信方式，但您可以将一个服务注入另一个服务。服务通常用作访问数据存储的方式

请阅读这些内容，directiveVsserviceVsController和when to use what?

Answer 4

您应该将DOM操作放在指令＆amp;尽可能使用角度数据绑定来进行DOM操作。

您可以将所有DOM操作都放入控制器中，但这通常会导致单片控制器。由于存在通过数据绑定更适合DOM操作的模式。指令，你应该充分利用它们。

Answer 5

最简单的解释是可测试性和可重用性。

控制器应仅包含业务逻辑。将任何表示逻辑放入控制器会显着影响其可测试性。 Angular对大多数情况和指令进行数据绑定以封装手动DOM操作。 Understanding Controllers

为什么在控制器中操作DOM被认为是个坏主意？

5 个答案: