什么是AngularJS指令？-Java 学习之路

176

我花了很多时间阅读AngularJS文档和几个教程，我对文档的无法接近感到非常惊讶 .

我有一个简单的，可回答的问题，对于想要获取AngularJS的其他人也可能有用：

What is an AngularJS directive?

在某处应该有一个简单，精确的指令定义，但AngularJS website提供了这些令人惊讶的无用定义：

On the home page：

指令是AngularJS中独特而强大的功能 . 指令允许您创建特定于您的应用程序的新HTML语法 .

在developer documentation：

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

而且有一个关于指令，具有讽刺意味的是，似乎假设 Spectator 已经了解它们是什么 .

任何人都可以提供一个明确的参考，准确定义指令的解释：

它是什么（见清楚definition of jQuery为例）
打算解决哪些实际问题和情况
它体现了什么样的设计模式，或者它如何适应AngularJS的声称MVC / MVW使命 .

5 回答

11
它是什么（以jQuery的清晰定义为例）？

指令本质上是一个函数†，它在Angular编译器在DOM中找到它时执行 . 函数几乎可以做任何事情，这就是为什么我认为定义指令是很困难的原因 . 每个指令都有一个名称（如ng-repeat，tabs，make-up-own-own），每个指令确定它可以在哪里使用：元素，属性，类，在注释中 .

†指令通常只有（后）链接功能 . 复杂的指令可以具有编译功能，预链接功能和后链接功能 .

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

指令最强大的功能是扩展HTML . 您的扩展程序是用于构建应用程序的Domain Specific Language（DSL） . 例如，如果您的应用程序运行在线购物站点，您可以扩展HTML以具有"shopping-cart"，"coupon"，"specials"等指令 - 无论在"online shopping"域中使用哪种词或对象或概念更自然，而不是"div"和"span" s（如@WTK已经提到的那样） .

指令还可以组件化HTML - 将一堆HTML组合成一些可重用的组件 . 如果您发现自己使用ng-include来提取大量HTML，那么可能是重构指令的时候了 .

它体现了什么样的设计模式，或者它如何适应声称的MVI / MVW angularjs任务

指令是您操纵DOM并捕获DOM事件的地方 . 这就是指令的编译和链接函数都接收“元素”作为参数的原因 . 您可以
- 定义了一堆HTML（即模板）来替换该指令
- 将事件绑定到此元素（或其子元素）
- 添加/删除一个类
- 更改text（）值
- 注意对同一元素中定义的属性的更改（实际上它是被监视的属性值 - 这些是范围属性，因此指令监视"model"以进行更改）
- 等
在HTML中我们有类似 <a href="..."> ， <img src="..."> ， <br> ， <table><tr><th> 的内容 . 您如何描述a，href，img，src，br，table，tr和th是什么？这就是指令 .
回复于 2024-04-20T09:09:58+08:00
2
对于角度指令，可能会有一个真正的 simple and initial 定义

AngularJS指令（ng-directives）是具有ng前缀（ng-model，ng-app，ng-repeat，ng-bind）的HTML属性，由Angular用于扩展HTML . （来自：W3schools角度教程）

这方面的一些例子是

ng-app指令定义了AngularJS应用程序 . ng-model指令将HTML控件（input，select，textarea）的值绑定到应用程序数据 . ng-bind指令将应用程序数据绑定到HTML视图 .
```
<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>
```
查看本教程，至少对我来说这是对Angular的最佳介绍之一 . 一个更完整的方法是@ mark-rajcok之前所说的一切 .
回复于 2024-04-20T09:09:58+08:00
3

查看文档，指令是您可以编写的结构，angularjs解析以创建对象和行为 . 换句话说，它是一个模板，您可以在其中使用任意节点和伪javascript的混合数据的占位符表示您的窗口小部件（组件）的结构，行为方式以及如何通过数据提供方式的意图 . Angularjs然后针对这些指令运行，将它们转换为工作的html / javascript代码 .

指令就在那里，因此您可以使用适当的语义构建更复杂的组件（小部件） . 只需看看指令的angularjs示例 - 它们're defining the tab pane (which isn' t当然在常规HTML中有效） . 它比使用div-s或spans更直观地创建结构，然后将其设置为看起来像选项卡窗格 .

回复于 2024-04-20T09:09:58+08:00
139

在AngularJS中，指令是HTML DOM元素的html重新标记，如属性（restrict-A），元素名称（restrict-E），注释（restrict-M）或CSS类（restrict-C），它们告诉AngularJS的HTML编译器（$编译）对该DOM元素执行指定的行为，甚至转换DOM元素及其子元素 . 一些例子是ng-bind，ng-hide / show等 .

回复于 2024-04-20T09:09:58+08:00
4
主页非常明确：当您将鼠标悬停在最后一部分的标签上时：

我们使用自定义标签元素扩展了HTML的词汇表 . 选项卡抽象了呈现选项卡所需的复杂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 ，让angular处理这些元素的渲染 .
回复于 2024-04-20T09:09:58+08:00

什么是AngularJS指令？

5 回答

相关问题