角度指令

Question

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

当docs / tutorials引用指令时，它们是指：

• HTML（el，attr或class）;
• 编译后的HTML;
• 执行的Javascript函数;
• 两者合作的一般概念;

有时使用该术语的上下文似乎有点模糊，可能是因为我还处于学习阶段。

Answer 1

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

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

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

Answer 2

Angular团队提出的指令定义非常明确。

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

我使用术语指令的上下文如下：

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

我有一张图片：

 <img src="image.jpg"/>

让我们在image元素上添加一个标记，以便AngularJs框架知道我们想要操作那个html元素，或者元素中的html。

<img lazy-load src="image.jpg" />

为了确保在javascript启动之前还没有获取image.jpg，我们只需在src中添加一个占位符，并在该指令中可用的元素上添加一个属性。

<img lazy-load src="placeholder.jpg" origin-src="image.jpg" />

现在让我们在AngularJs Framework中构建实际的指令。

app.directive('lazyLoad', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {

      var imagesrc = attrs.originSource;          
      // further logic to lazyload image
    }
  };

});

您可以在此处找到许多关于指令的示例： https ： //docs.angularjs.org/guide/directive

Answer 3

指令 - 我想这个术语本身会给大多数人带来困惑。 这就是为什么棱角分明的人会使用2.0的“组件”术语。

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

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

我们可以创建一个指令，它将采用图像名称，优先级等，并将自己呈现它。

我们可以将其创建为可重用的组件，并在app中的任何位置使用它，只需将其包含在html标记中即可。

Answer 4

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

虽然这里的其他评论集中在HTML或定义指令的Javascript上，但这些都不是最重要的概念。 大外卖的是，在这两个 HTML和Javascript代码的HTML结果写指令（和可能的角码，太）获得运行。 在定义指令时，会指示一个模板 ，用于指示实际输出哪个HTML来代替您编写的指令。 但更重要的是，还指示了一个控制器 ，它告诉您哪些代码可供HTML访问，包括对象和函数。

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

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

<footer></footer>

进入index.html并可以访问两件事：生活在“directives / footer.html”的模板和名为“footer”的控制器 。 这是footerController的定义。 它的存在只是为了让HTML页面可以看到应用程序的版本号，我希望在所有页面的页脚中显示：

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

ungallery.controller("footer", footerController);

控制器可以将任何对象或函数分配给称为this的对象，并且由于此指令连接，这些对象和函数将可用于模板HTML。 该控制器分配一个值， this ， this.version ，这样我就可以得到从我的模板值。

在该指令的定义，controllerAs语法设置，我用它来访问控制器的名字this从模板。 该controllerAs语法和不同的名字来代替刚写的原因{{this.something}}是为了防止混淆当一个页面有几个指令，每个都有自己的含义的this 。 在定义footer控制器， this与前缀访问footerController 。 当我想显示实际版本号时，这就是模板HTML中的内容。

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

希望有所帮助！ 如果我需要扩展或澄清任何这一点，请告诉我。

- D.