Angularjs 创建可重用的UI组件

在jQuery中，您可以创建可重用的UI组件。在AngularJS中，我理解使用指令是实现这一点的等效方法。指令语法包括一个链接属性，您可以在其中操作DOM。但这就是我困惑的地方。AngularJS旨在避免操纵DOM，因为AngularJS在内部操纵DOM，所以为什么要这样做？有没有更好的方法可以做到这一点，而不必实际操作DOM？

您从哪里知道所有DOM操作都是坏事？如果DOM没有被操纵，任何东西怎么会被渲染呢？在控制器或Angular的上下文之外处理DOM是个坏主意，但在指令中插入Angular，可以安全地进行DOM更改，而不会破坏任何内容

您基本上是在问如何在不操纵DOM的情况下操纵DOM，这毫无意义

---

继续在link函数中执行您的操作，这很好。

在某些情况下，您必须以某种方式操作DOM，但对于95%的情况，您可以坚持angular的内置指令，例如ng if、ng hide/show、ng switch、ng repeat等

但这些都是指令，所以angular并不是“在内部”操纵DOM，而是通过指令进行操作，就像它的本意一样

请记住，在指令模板中，您可以使用其他指令，以便指令可以专注于自己的任务。

使用$rootScope中的$new（isolate）方法创建可重用的UI组件。将隔离设置为true。不要操纵UI组件之外的任何内容：

如果为true，则范围不典型地从 父范围。作用域是隔离的，因为它看不到父作用域 财产。创建小部件时，小部件最好不要 意外读取父状态

---

如何保证安全地进行DOM更改？如果您正在操作的DOM部分是由Angular在父级操作的，该怎么办。我可以在这里看到可能的冲突。link函数是在元素连接到DOM时运行的，Angular的任何其他部分如何能够进行干扰？如果我的DOM操作修改父类，而父类由ng类设置，这将被视为冲突。对，我明白你的意思，但是，这可能是“不要那样做”列表中要添加的内容。如果愿意，我可以在控制器层次结构中创建类似的问题。指令仍然是执行自定义DOM操作的地方。如果您使用某些第三方angular UI代码，则该代码的开发人员可能没有记录“只是不要这样做”。如果您正在编写自己的，您可能永远不会遇到这个问题，但我见过jQuery UI控件在嵌入它的代码中操纵父DOM属性和样式，因此我假设angularJS也会出现类似的问题。在指令中，大多数时候您不需要调用$new（除非您使用半透明函数手动进行半透明）在指令中，您只需使用

scope:true

或

scope:{}

第二个将创建隔离的作用域，并且您可以将其作为链接函数中的第一个参数访问。

因此angular不会“在内部”操纵DOM

excatly oposite。如果Angular不进行DOM操作，您认为会如何渲染任何内容？您是否误解了我在这里试图表达的观点，ng if指令操作DOM，ng bind指令操作DOM等等……因此没有“内部”功能在Angular中，这些指令使用的API与任何人在其自定义指令中使用的API完全相同……因此，这在很大程度上是在“公共”API的一部分完成的，而不是在内部完成的。编译和链接的整个过程需要做DOM管理，它读取html替换指令（运行编译+链接函数）然后将其重新插入DOM。因此内部Angular需要使用DOM操作，指令仅添加自定义DOM操作，而Angular则执行其余操作。可以说指令执行DOM操作（用户代码应仅使用指令操作DOM）但并不是说Agnular内部不这样做。你所说的$compile服务，witch也是公共的。除此之外，它实际上并没有像你所想的那样对所有指令都起作用，这取决于该指令是否指定了一个模板。如果不是，它实际上不会替换DOM中的任何内容。（至少在阅读代码时没有透露）…它向其中添加了一些类和数据，这样做很公平，它可以进行内部DOM操作，但对本文的主题来说并不重要。除了初始引导（不是真正从指令中调用$compile），大部分$compile的使用都将在指令中，您实际上必须输入“根节点”在某些情况下，使用$animate服务是有意义的。我说在大多数情况下，因为我实际上认为UI引导团队在进行模态对话框时将$compile的使用扩展到了服务中…他们不必这样做。