什么是angularjs指令？ [英] What is an angularjs directive?

问题描述

我花了不少时间，通过angularjs文档和几个教程读书，我一直在文档如何难以接近颇为惊喜。

我有一个简单，可回答的问题也可能是有用的人寻求拾取angularjs：

什么是angularjs指令?? 的

应该有一个指令某处简单，precise定义，但 angularjs网站提供这些令人惊讶的无用的定义：

• 的 在主页上 的：指令仅在角一个独特而强大的功能。指令让你创造新的HTML语法，特定于应用程序。




• 的在开发者文档 的：指令是教HTML新方式招数。 DOM在编译指令对HTML匹配和执行。这使得指令进行注册的行为，或转换DOM。




• 有一个一系列会谈，了解指令当中，讽刺的是，似乎认为观众已经明白它们是什么。

会有人能够提供，清晰的参考，的指令是什么precise定义，解释道：

1. 这是什么（见的jQuery 的明确的定义为例）


2. 什么实际问题和情况下，它旨在解决


3. 它体现了什么样的设计模式，或者，它是如何融入所谓的MVC / MVW 使命angularjs的

谢谢！

解决方案

  

这是什么（请参阅的jQuery的明确定义为例）？

一个指令本质上是一个函数^{＆匕首​​;} ，当角编译器发现它在DOM执行。该功能（S）可以做几乎所有的东西，这就是为什么我认为这是相当困难的定义指令是什么。每个指令有一个名称（如NG重复，制表符，化妆自己动手），并且每个指令决定了它可以用于：元素，属性，等级，在注释

^{＆匕首​​;} 一个指令通常只有一个（POST）链接功能。一个复杂的指令可以有一个编译功能，pre-链接功能和链接后的功能。

  

什么实际问题和情况是它旨在解决？

最强大的东西指令可以做的是扩展HTML。你的扩展是建立您的应用程序领域特定语言（DSL）。例如，如果你的应用程序运行的在线购物网站，你可以扩展HTML有购物推车，优惠券，特价等指令 - 无论文字或物体或概念更自然地内用网上购物领域，而不是格S和跨越S（前面已经提到@WTK）。

指令也可以组件化HTML - 一群一群HTML成一些可重用的组件。如果你发现自己使用NG-包括大量的HTML来拉，它可能是时间来重构为指令。

  

它体现了什么样的设计模式，或者，它是如何适应
  angularjs的所谓MVC / MVW使命

指令，在那里你操作DOM并赶上DOM事件。这就是为什么该指令的编译和链接功能都收到了元素作为参数。您可以

• 定义一堆的HTML（即模板），以取代指令


• 事件绑定到这个元素（或其子女）


• 添加/删除类


• 更改文本（）值


• 手表更改在同一元素定义的属性（实际上它是被观看了属性的值 - 这是作用域属性，因此该指令手表模式更改）


• 等

---

在HTML中，我们有东西像＆LT; A HREF =...＆GT; ，＆LT; IMG SRC =...＆GT; ，＆LT; BR＆GT; ，＆LT;表＆gt;＆LT; TR＆GT;＆LT;第i 。你会如何​​描述中，href，IMG SRC，BR，表，TR和TH是什么呢？这是一个指令是什么。

I have spent quite a lot of time reading through angularjs documentation and several tutorials, and I have been quite surprised at how unapproachable the documentation is.

I have a simple, answerable question that may also be useful to others looking to pick up angularjs:

What is an angularjs directive??

There should be a simple, precise definition of a directive somewhere, but the angularjs website offers these surprisingly useless definitions:

• On the home page: Directives is a unique and powerful feature available only in Angular. Directives let you invent new HTML syntax, specific to your application.

• In the developer documentation: Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.

• There is a series of talks about directives which, ironically, seem to assume the audience already understands what they are.

Would anyone be able to offer, for clear reference, a precise definition of what a directive is that explains:

1. What it is (see the clear definition of jQuery as an example)
2. What practical problems and situations it is intended to address
3. What design pattern does it embody, or alternatively, how does it fit into the purported MVC/MVW mission of angularjs

thanks!

解决方案

What it is (see the clear definition of jQuery as an example)?

A directive is essentially a function^† that executes when the Angular compiler finds it in the DOM. The function(s) can do almost anything, which is why I think it is rather difficult to define what a directive is. Each directive has a name (like ng-repeat, tabs, make-up-your-own) and each directive determines where it can be used: element, attribute, class, in a comment.

^† A directive normally only has a (post)link function. A complicated directive could have a compile function, a pre-link function, and a post-link function.

What practical problems and situations is it intended to address?

The most powerful thing directives can do is extend HTML. Your extensions are a Domain Specific Language (DSL) for building your application. E.g., if your application runs an online shopping site, you can extend HTML to have "shopping-cart", "coupon", "specials", etc. directives -- whatever words or objects or concepts are more natural to use within the "online shopping" domain, rather than "div"s and "span"s (as @WTK already mentioned).

Directives can also componentize HTML -- group a bunch of HTML into some reusable component. If you find yourself using ng-include to pull in lots of HTML, it is probably time to refactor into directives.

What design pattern does it embody, or alternatively, how does it fit into the purported MVC/MVW mission of angularjs

Directives are where you manipulate the DOM and catch DOM events. This is why the directive's compile and link functions both receive the "element" as an argument. You can

• define a bunch of HTML (i.e., a template) to replace the directive
• bind events to this element (or its children)
• add/remove a class
• change the text() value
• watch for changes to attributes defined in the same element (actually it is the attributes' values that are watched -- these are scope properties, hence the directive watches the "model" for changes)
• etc.

---

In HTML we have things like <a href="...">, <img src="...">, <br>, <table><tr><th>. How would you describe what a, href, img, src, br, table, tr, and th are? That's what a directive is.

这篇关于什么是angularjs指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！