别问为什么要学,要用。问就是业务需要

指令 directive

// 官方 demo
var myModule = angular.module(...);

myModule.directive('directiveName', function factory(injectables) {
  var directiveDefinitionObject = {
    priority: 0,
    template: '<div></div>', // or // function(tElement, tAttrs) { ... },
    // or
    // templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... },
    transclude: false,
    restrict: 'A',
    templateNamespace: 'html',
    scope: false,
    controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
    controllerAs: 'stringIdentifier',
    bindToController: false,
    require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'],
    multiElement: false,
    compile: function compile(tElement, tAttrs, transclude) {
      return {
         pre: function preLink(scope, iElement, iAttrs, controller) { ... },
         post: function postLink(scope, iElement, iAttrs, controller) { ... }
      }
      // or
      // return function postLink( ... ) { ... }
    },
    // or
    // link: {
    //  pre: function preLink(scope, iElement, iAttrs, controller) { ... },
    //  post: function postLink(scope, iElement, iAttrs, controller) { ... }
    // }
    // or
    // link: function postLink( ... ) { ... }
  };
  return directiveDefinitionObject;
});

1.在 ng 1.x (用的这个版本)中, 组件就是一种特殊的指令 , 将 restrict 来设置为 'E'

2.指令有自己的一套作用域,通过设置 scope

info: '=?'  // 基本类型,双向的
info: '@?'  // 字符串
info: '&?'  // 函数,传递参数的时候 需要包装成 JSON 形式
info: '<&?' // 单向的,不过需要注意 ,object 类型只会是浅拷贝

3.在指令组件中,可以通过 定义 link 方法 ,获取到该指令下的 DOM 元素

4.指令还可以拥有自己的控制器, controller

=====================================

神秘资料
https://docs.angularjs.org/guide/directive
https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object