声明一个 directive 是AngularJs的一个特性。通过声明一个 directive，你创建了一些东西，允许你以各种方式扩展HTML。因此，当人们谈论 * 指令 * 时，他们指的是整个事情，当你看到所有细节时，这是一个相当复杂的概念。
大多数人在谈论JavaScript函数定义 directive 时都会提到“directive”，因为这是新的 * directive * 的定义方式。
大多数情况下，他们不谈论DOM中编译的HTML。

Angular团队对指令的定义非常明确。
指令是DOM元素上的标记（例如属性，元素名称，注解或CSS类），告诉AngularJS的HTML编译器（$compile）将指定的行为附加到该DOM元素，甚至转换DOM元素及其子元素。
我使用指令一词的上下文如下：
我将构建一个延迟加载图像的指令。
我有一个图像：

<img src="image.jpg"/>

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

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

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

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

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

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

指令-我想术语本身会给大多数人造成混乱。这就是为什么有Angular 的人来与'组件'术语与2.0。
指令只是编写我们自己的可重用自定义标记，并为其分配一些有意义的功能。
让我们说，我们要显示一个广告面板在所有网页上一遍又一遍.它应该取决于用户的历史记录，偏好，并支持延迟加载图像等。
我们可以创建一个指令，它将接受image-name，preference等，并将自己渲染它。
我们可以将其创建为可重用组件，并通过将其包含在html标记中在应用程序中的任何地方使用它。

指令是定义的类，可以向DOM添加新行为或修改现有行为。术语“指令”Angular通常指的是元素、属性和行为的组合，它们共同工作以扩展HTML的功能。它还包含应用这些指令时执行的JavaScript函数（逻辑）。
在指令中基本上有以下类型：
1.属性指令：它包括 *ngModel、*ngClass、*ngStyle。
1.结构化指令：它包括 *ngFor、*ngIf *ngSwitch。
1.自定义指令：要创建自定义指令，我们使用@Directive创建一个类让我们以下面的samoke为例：
1.创建新的angular项目
1.生成一个组件，例如让我们创建项目列表组件
1.定义组件列表
import { Component } from '@angular/core';

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
  styleUrls: ['./item-list.component.css']
})
export class ItemListComponent {
  items = ['Item 1', 'Item 2', 'Item 3'];
  showList = true;
}

4.在模板中使用指令

<div *ngIf="showList">
      <h2>List of Items</h2>
      <ul>
        <li *ngFor="let item of items">{{ item }}</li>
      </ul>
    </div>
    <div *ngIf="!showList">
      <p>The list is hidden.</p>
    </div>
    <button (click)="showList = !showList">
      Hide the list
    </button>

指令是Angular的核心编码思想，也是其大部分功能的来源。它们是“领域特定语言”的实现，这意味着你，程序员，可以创建自己的语言。
虽然这里的其他评论都集中在HTML或JavaScript的定义的指令，这两个都不是真正最重要的概念。最大的收获是，在HTML中编写指令会导致HTML和JavaScript代码（可能还有Angular代码）同时运行。在定义指令的时候，会显示一个模板**，它告诉你哪个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分配一个值，这样我就可以从我的模板中得到那个值。
在该指令的定义中，configurerAs语法设置了用于从模板访问控制器的this的名称。之所以使用BullerAs语法和单独的名称，而不是只写{{this.something}}，是为了防止页面有多个指令时出现混淆，每个指令对this都有自己的含义。在footer控制器的定义中，this通过前缀footerController访问。下面是当我想显示实际版本号时，它在模板HTML中的样子。

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

希望能帮上忙！让我知道如果我需要扩大或澄清任何这一点。
-- D