AngularJS 中指令和静态 DOM 元素的区别答案

【问题标题】：Difference between the directives and static DOM elements in AngularJSAngularJS 中指令和静态 DOM 元素的区别
【发布时间】：2013-03-13 21:10:53
【问题描述】：

我已经阅读了 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 多个元素。如果我将它们更改为单个指令：肯定会更容易管理它们。

如果它只是在浏览器的编译时变慢，但在运行时发生了什么？

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

谢谢

丹尼尔

【问题讨论】：

“当我创建一个具有相同 dom 元素的指令时会发生什么”——我在这里没有关注你。您指的是什么“相同元素”？
我正在从
元素创建指令。我在页面上有 200 个。

标签： javascript frameworks angularjs

【解决方案1】：

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

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

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

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

【讨论】：