Javascript 角度指令

我正在研究Angular库，有一个关于指令的简单问题（也许是微不足道的），这可能有助于我在阅读一般文档时将术语置于适当的上下文中：

当文档/教程涉及指令时，它们是否涉及：

• HTML（el、attr或class）
• 编译后的HTML
• 执行的Javascript函数
• 二者共同工作的一般概念

---

有时，这个词的使用背景似乎有点模糊，可能是因为我还在学习阶段

声明指令是AngularJs的一项功能。通过声明一个指令，您可以创建一些允许您以各种方式扩展HTML的东西。所以当人们谈论指令时，他们指的是整个事情，当你看所有的细节时，这是一个相当复杂的概念

大多数人在谈论定义指令的JavaScript函数时都会谈论“指令”，因为新指令就是这样定义的

---

大多数情况下，他们不会讨论DOM中已编译的HTML。

Angular团队对指令的定义非常清楚

指令是DOM元素（如属性、元素名称、注释或CSS类）上的标记，它告诉AngularJS的HTML编译器（$compile）将指定的行为附加到该DOM元素，甚至转换DOM元素及其子元素

我使用“指令”一词的上下文如下：

我将构建一个延迟加载图像的指令

我有一个图像：

 <img src="image.jpg"/>

您可以在此处找到许多关于指令的示例：

---

指令-我想这个术语本身会让大多数人感到困惑。这就是为什么人们在2.0中使用“组件”术语的原因

指令只是编写我们自己的可重用自定义标记，并为其分配一些有意义的完整功能

比如说，我们希望在所有页面上反复显示一个广告面板。它应该取决于用户历史、偏好，还支持延迟加载图像等

我们可以创建一个指令，该指令将采用图像名称、首选项等，并自行呈现

---

我们可以将其创建为一个可重用组件，并在应用程序中的任何地方使用，只需将其包含在html标记中即可。

指令是Angular的核心编码思想，也是其大部分功能的来源。它们是“领域特定语言”的一种实现，这意味着程序员可以编写自己的语言

尽管这里的其他评论集中在定义指令的HTML或Javascript上，但这两个概念都不是最重要的概念。最大的收获是，在HTML中编写指令会导致HTML和Javascript代码（也可能是角度代码）运行。在定义指令时，将指示一个模板，该模板告诉您将实际输出哪个HTML来代替您编写的指令。但更重要的是，还指示了一个控制器，它告诉您的HTML可以访问哪些代码，包括对象和函数

ungallery.directive('footer', function() {
return {
    restrict: "E",
    controller: "footer",
    controllerAs: "footerController",
    templateUrl: 'directives/footer.html'
}
});

如果我的index.html（或它加载的任何脚本）中存在此指令定义，则我可以稍后编写：

<footer></footer>

控制器可以将任何对象或函数分配给名为this的对象，由于该指令，这些对象和函数将可用于模板HTML。此控制器将一个值分配给

此

，

此.version

，以便我可以从模板中获取该值

在指令的定义中，controllerAs语法设置了用于从模板访问控制器的

this

的名称。之所以使用controllerAs语法和单独的名称，而不仅仅是编写

{{this.something}

，是为了防止在一个页面有多个指令时出现混淆，每个指令对

this

都有自己的含义。在

页脚

控制器的定义中，使用前缀

页脚控制器

访问

此

。当我想显示实际的版本号时，这是HTML模板中的样子

 <span>Version {{footerController.version}}.</span>

Version{{footerController.Version}。

希望有帮助！如果我需要进一步阐述或澄清这些内容，请告诉我

---

--指令是HTML词汇表的扩展，它允许我们创建新的行为。该指令可以作为属性、元素、类，甚至作为注释应用。这有点相关，对我有很大帮助。：）谢谢这就是我困惑的根源。这个概念还可以，但在教程和讨论中，我的印象是，人们倾向于交替使用这个术语来谈论HTML元素（扩展）、函数或概念。有时这会让现在有点困惑。我不同意最后一段，指令的全部目的是使用angularjs框架将额外的功能编译到dom中。@Frankey:指令是创建HTML并将其放入dom的东西。然后驻留在DOM中的HTML片段不被称为指令。JS中定义的编译、观看和执行所有的魔术，这就是指令。如果我理解正确，你不同意这一点。您能更详细地说明您的观点吗？该指令用于从DOM元素创建特定于域的功能，并允许您使用特定于业务的构建块组装视图。此外，它还提供了附加js的所有其他内容。。

ungallery.directive('footer', function() {
return {
    restrict: "E",
    controller: "footer",
    controllerAs: "footerController",
    templateUrl: 'directives/footer.html'
}
});

<footer></footer>

var footerController = function() {
   this.version = CONSTANT.version;
};

ungallery.controller("footer", footerController);

 <span>Version {{footerController.version}}.</span>