AngularJS 指令是什么？

我花了相当多的时间阅读 AngularJS 文档和一些教程，我非常惊讶这些文档是如此的不可接近。

我有一个简单的、可以回答的问题，也许对其他想要学习 AngularJS 的人有用:

AngularJS 指令是什么？

某处应该有一个简单、精确的指令定义，但 AngularJS 网站提供了这些出人意料的无用定义:

在首页 :

指令是 AngularJS 中一个独特而强大的特性。指令允许您发明新的 HTML 语法，特定于您的应用程序。

在 开发人员文档:

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

还有一个关于指令的 一系列的讲座，具有讽刺意味的是，它似乎假定听众已经理解了它们是什么。

是否有人能够提供一个明确的定义，解释什么是指令，以供明确参考:

  1. 它是什么(参见清晰的 JQuery 的定义作为一个例子)
  2. 要解决什么样的实际问题和情况
  3. 它体现了什么样的设计模式，或者说，它如何适合所谓的 AngularJS 的 MVC/MVW任务。
49915 次浏览
小开

看看文档，指令是你可以编写的结构，angularjs 解析，以创建对象和行为。换句话说，它是一个模板，在其中你使用任意节点和伪 javascript 和占位符的数据混合，以表达你的小部件(组件)是如何结构化的意图，它的行为和它是如何与数据饲料。 Angularjs 然后针对这些 指令运行，将它们转换成可用的 html/javascript 代码。

指令的存在使您可以使用适当的语义构建更复杂的组件(小部件)。只需看一下 angularjs 指令的例子——它们定义了选项卡窗格(当然在普通 HTML 中是无效的)。它比使用类似 div-s 或 span 来创建结构更直观，然后将其样式设置为 看起来像一个选项卡窗格。

小开

网站主页对此非常明确: 当你在最后一部分的标签页上悬停时:

我们已经用定制的 tabs扩展了 HTML 的词汇表 tabs抽象了复杂的 HTML 结构 以及呈现选项卡所必需的行为 可读的视图和非常容易重用的语法。”

然后在下一页:

angular.module('components', []).
directive('tabs', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function($scope, $element) {
var panes = $scope.panes = [];


$scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
}

因此，您可以发明 html 元素，例如 tabs，并让 angle 处理这些元素的呈现。

小开
最佳答案

它是什么(例如 jQuery 的清晰定义) ？

指令本质上是一个函数 & 匕首;，当 Angular 编译器在 DOM 中找到它时执行。函数几乎可以做任何事情，这就是为什么我认为定义指令是相当困难的原因。每个指令都有一个名称(如 ng-repeat、 tab、 make-up-your-own) ，并且每个指令都确定它可以在注释中的哪些位置使用: 元素、属性、类。

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

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

指令所能做的最强大的事情就是扩展 HTML。您的扩展是用于构建应用程序的 领域特定语言(DSL)。例如，如果你的应用程序运行一个在线购物网站，你可以扩展 HTML 的“购物车”，“优惠券”，“特价”等指令-任何词或对象或概念更自然地使用在“在线购物”领域，而不是“ div”和“ span”(如@WTK 已经提到)。

指令还可以组件化 HTML ——将一组 HTML 分组成一些可重用的组件。如果您发现自己使用 ng-include 来引入大量 HTML，那么可能是时候重构成指令了。

它体现了什么样的设计模式，或者说，它如何适应 据称是安古拉杰斯的 MVC/MVW 任务

指令是操作 DOM 和捕获 DOM 事件的地方。这就是为什么指令的编译和链接函数都接收“元素”作为参数。你可以的

  • 定义一组 HTML (即模板)来替换指令
  • 将事件绑定到此元素(或其子元素)
  • 添加/删除类
  • 更改 text ()值
  • 观察在同一个元素中定义的属性的变化(实际上是观察属性的值——这些是范围属性，因此指令观察“模型”的变化)
  • 等等。

在 HTML 中，我们有像 <a href="...">、 <img src="...">、 <br>、 <table><tr><th>这样的东西。您如何描述什么是 a、 href、 img、 src、 br、 table、 tr？这就是指令。

小开

也许角度指令真正的 简单而初步定义是

AngularJS 指令(n- 指令)是带有 ng 前缀的 HTML 属性(n- 模型、 n- 应用程序、 n- 重复、 n- 绑定) ，Angular 使用这些属性来扩展 HTML。(来自: W3学校角度教学)

这方面的一些例子是

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

超模指令绑定 HTML 控件的值(input, 选择，textarea)到应用程序数据。

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

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

检查这个教程，至少对我来说，它是一个最好的介绍角度。一个更完整的方法就是@mark-rajcok 之前所说的。

小开

在 AngularJS 指令是 HTML DOM 元素的 HTML 重新标记，比如属性(limit-A)、元素名(limit-E)、注释(limit-M)或 CSS 类(limit-C) ，这些元素告诉 AngularJS 的 HTML 编译器对该 DOM 元素执行指定的行为，甚至转换 DOM 元素及其子元素。一些例子是 n- 绑定，n- 隐藏/显示等。


提交答案