javascript - AngularJS 中指令和静态 DOM 元素的区别

Question

我已经阅读了 Compilation process, and directive matching关于 AngularJS 文档。

但我真的不明白这些指令。

示例:

我有静态 html:

<div class="test test2" cid="549" sid="a5e3c4f8a9">text-text-text</div>

当我手动执行此操作时，我知道它只会在浏览器解析时创建和调用一次。

但是当我创建具有相同 dom 元素的指令时会发生什么？

<x my-directive>text-text-text</x>

这是同样的效果吗？

我问这样一个新手问题，因为我在我的 html 页面上使用了 200 多个元素。如果我将它们更改为单个指令:肯定会更容易管理它们。

如果它只是在浏览器编译时缓慢，那么没有问题，但在运行时发生了什么？

如果问题不够专业，我很抱歉。我是 Stackoverflow 的新手。

谢谢

丹尼尔

Answer 1

如果我理解正确的话，您想知道 AngularJS 如何创建指令以及调用指令方法多少次。

当您创建指令(使用 module.directive('myDirective', ...) )时，您实际上只是在创建定义。每次使用该指令(如 <div my-directive> )时，AngularJS 将运行指南中描述的过程:也就是说，它将编译并链接每次使用。它必须是这样的，因为该指令不是孤立存在的；它不仅存在于$scope中它被调用的地方，而且它也可以利用元素属性和嵌入的内容。定义发生一次，但每个实例都会被编译和链接。

指令一旦创建，技术上就完成了；如果你没有设置任何$watch或$observe或者事件绑定(bind)，你的“指令”现在就是 DOM 中 link 末尾的内容。函数 - 没有更多的计算。换句话说，编译和链接后会发生什么完全取决于您。

回到你的例子:如果你在页面上使用 200 个相同的指令，该指令将被定义一次，但所有 200 个指令将被单独编译和链接。但我不太确定你问这个问题到底想表达什么。您的问题背后的问题是什么？