在 angularJS 中操作 DOM:最佳实践? [英] Manipulating DOM in angularJS : best practice?

问题描述

我们正在使用 AngularJS 构建一个大型 Web 应用程序.我们在不同的情况下经常使用自定义指令.当涉及到 DOM 操作、绑定事件等时......发生了，我们在自定义指令的 link 函数中定义了操作 DOM 的函数，但是我们从控制器调用它(我们定义$scope 中的函数，因此它可以被给定的控制器访问).我认为这样做的角度方法是为每个函数定义一个单独的自定义指令并直接从模板中使用它但在我们的例子中我不知道这样做会舒服到什么程度，我们已经很多自定义指令，所以做我们正在做的事情(定义在指令中操作 DOM 并从控制器调用它的函数)是不是很糟糕，这是否有意义，或者就像我们在控制器中操作 DOM 一样?对我们来说，有点关注分离，我们从来没有在控制器中定义操作DOM的函数，只在指令中定义，但是从控制器调用它似乎不太对，是吗?

显示我们的自定义指令的示例:

angular.module('exp', []).directive('customdirectiveExp', ['', function(){//在编译期间运行返回 {name: 'customDirectiveExp',控制器:ControllerExp"，控制器为:ctrl"，templateUrl: 'templateExp',链接:函数($scope，iElm，iAttrs，控制器){/* 这些函数将在需要时从 ControllerExp 中调用.函数可以做任何事情，比如操作 DOM、插件事件监听器...*/scope.manipulateDom1 = function(){//DOM 操作};scope.manipulateDom2 = function(){//DOM 操作};scope.manipulateDom3 = function(){//DOM 操作};}};}]);

解决方案

我认为不要从控制器操作 DOM"的口号又回到了过去，那时指令主要/仅使用链接函数(或指令控制器在只是一种与其他指令交互的方式).

目前建议的最佳实践是使用组件"(可以通过指令实现)，其中基本上所有指令逻辑都留在控制器中.(例如，在 Angular 2 中没有链接函数，每个组件/指令基本上都是一个类/控制器(加上一些元数据).)

在这种情况下，我认为在 指令的 控制器中操作 指令的 模板中的 DOM 完全没问题.

<小时>

这个想法是保持你的模板/HTML 声明性.比较以下片段: