Angular 指令 DOM 操作依赖于范围变量答案

【问题标题】：Angular directive DOM manipulation dependent on scope variablesAngular 指令 DOM 操作依赖于范围变量
【发布时间】：2016-09-05 02:02:18
【问题描述】：

我已经读过 Angular 中的 DOM 操作应该在指令的编译函数中完成，而不是在预链接/后链接/控制器中完成。 compile 函数无权访问作用域。

我的问题是我想做依赖于范围变量的 DOM 操作。例如，我有一个要传递给指令的列表。在指令中，我正在创建一个自定义选择，其中包含列表项。在这种情况下，操作 DOM 的正确位置在哪里？

请注意，我没有使用 ng-repeat - 当列表变大时，我发现它非常慢。

【问题讨论】：

你误解了你读到的任何东西。 DOM 操作应该在指令模板中完成，其次是在指令的链接函数中（它确实可以访问范围）。（请注意，直接的 jQuery 样式的 DOM 编辑是个坏主意；理想情况下，链接函数应该只修改模型数据，而 DOM 会作为副作用发生变化。）对于大多数目的，您根本不需要触摸 $compile .

标签： angularjs angular-directive

【解决方案1】：

我不知道你在哪里读过“角度中的 DOM 操作应该在指令的编译函数中完成”。这与 AngularJS 团队的建议相矛盾。

创建一个操作 DOM 的指令

想要修改 DOM 的指令通常使用 link 选项来注册 DOM 侦听器以及更新 DOM。

-- AngularJS Developer Guide - Directives - DOM Manipulation

内置指令ng-repeat、ng-if、ng-when等都在link函数中进行DOM操作。

编译

compile 函数处理模板 DOM 的转换。由于大部分指令不做模板转换，所以不经常使用。

-- AngularJS $compile Service API Reference -- compile

【讨论】：

也许我错了，但这是我正在阅读的链接 - toptal.com/angular-js/angular-js-demystifying-directives（向下滚动到表格）。也许我需要将其重新表述为“通过添加 HTML 元素进行 DOM 操作应该在指令的编译函数中完成”
你引用的文章有一些很好的材料，但他所说的有些事情是完全错误的。不允许在后链接中添加指令的说法是完全错误的。可以在 postlink 函数中添加指令，但需要编译并链接到具有 $compile 服务的范围才能正常工作。我建议坚持 AngularJS 团队的建议。
那篇文章（我同意 @georgeawg 的观点充其量只是误导，而且似乎已经过时了）说：“后链接函数是自定义 AngularJS 指令中最常实现的函数。在这个功能，几乎可以做任何合理的事情。可以操作 DOM（仅针对自身和子元素）..."
感谢您的指导。出现这种情况的原因是由于我遇到的问题（稍后我将尝试添加一些示例代码）。基本上，我有一个指令，我在链接函数中创建所需的 HTML 选择 - 选项取决于范围变量。我使用编译服务将其附加到模板中。选择经过验证并且表现良好，但不会触发位于指令之外的验证 ngmessage。但是我使用的过程是否正确 - 即在链接中构建它并使用编译服务？
是的，过程是正确的。在链接功能中构建它并使用$compile 服务。检查问题：Removing directive attribute does not remove listener。在我的回答中，我从 DOM 中删除了一个 ng-click 指令。我在链接功能中使用$compile 服务。