什么是AngularJS指令?

2022-08-30 01:45:12

我花了很多时间阅读AngularJS文档和几个教程,我对文档的难以接近感到非常惊讶。

我有一个简单,可回答的问题,对其他希望学习AngularJS的人也可能有用:

什么是AngularJS指令?

在某个地方应该有一个简单,精确的指令定义,但是AngularJS网站提供了这些令人惊讶的无用定义:

在主页上

指令是AngularJS中提供的独特而强大的功能。指令允许您发明特定于您的应用程序的新 HTML 语法。

开发人员文档中

指令是教HTML新技巧的一种方式。在 DOM 编译期间,指令将与 HTML 匹配并执行。这允许指令注册行为或转换 DOM。

还有一系列关于指令的讨论,具有讽刺意味的是,这些讨论似乎假设观众已经理解了它们是什么。

任何人都可以提供一个指令的精确定义,以供明确参考,该定义可以解释:

  1. 它是什么(参见jQuery的明确定义作为示例)
  2. 它打算解决哪些实际问题和情况
  3. 它体现了什么设计模式,或者它如何适应AngularJS所谓的MVC / MVW使命。

答案 1

它是什么(参见jQuery的明确定义作为示例)?

指令本质上是一个函数当 Angular 编译器在 DOM 中找到它时执行。这些函数几乎可以做任何事情,这就是为什么我认为定义指令是相当困难的。每个指令都有一个名称(如ng-repeats,tabs,make-up-your-own),每个指令都决定了它可以在哪里使用:元素,属性,类,在注释中。

指令通常只有(后)链接功能。一个复杂的指令可以有一个编译函数、一个预链接函数和一个后链接函数。

它打算解决哪些实际问题和情况?

指令可以做的最强大的事情是扩展HTML。扩展是用于构建应用程序的域特定语言 (DSL)。例如,如果您的应用程序运行在线购物网站,则可以扩展HTML以具有“购物车”,“优惠券”,“特殊”等指令 - 任何单词,对象或概念在“在线购物”域中使用都更自然,而不是“div”和“span”(如前所述@WTK)。

指令还可以组件化HTML - 将一堆HTML分组到一些可重用的组件中。如果你发现自己使用ng-include来拉入大量的HTML,那么可能是时候重构为指令了。

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

指令是操作 DOM 并捕获 DOM 事件的位置。这就是为什么指令的编译和链接函数都接收“元素”作为参数的原因。您可以

  • 定义一堆HTML(即模板)来替换指令
  • 将事件绑定到此元素(或其子元素)
  • 添加/删除类
  • 更改 text() 值
  • 监视对同一元素中定义的属性的更改(实际上监视的是属性的值 - 这些是作用域属性,因此指令监视“模型”的更改)
  • 等。


在 HTML 中,我们有类似 、 、 、 .您如何描述 a、href、img、src、br、table、tr 和 th 是什么?这就是指令。<a href="..."><img src="..."><br><table><tr><th>

答案 2

也许一个非常简单和初始的角度指令定义是

AngularJS 指令(ng 指令)是 Angular 用来扩展 HTML 的带有 ng 前缀(ng-model、ng-app、ng-repeat、ng-bind)的 HTML 属性。(来自:W3学校角度教程)

这方面的一些例子是

ng-app 指令定义了一个 AngularJS 应用程序。

ng-model 指令将 HTML 控件的值(输入、选择、文本区域)绑定到应用程序数据。

ng-bind 指令将应用程序数据绑定到 HTML 视图。

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

检查本教程,至少对我来说,它是Angular最好的介绍之一。更完整的方法是@mark-rajcok之前所说的一切。