angular源碼分析：$compile服務——directive他媽

一、directive的注冊

1.我們知道，我們可以通過類似下面的代碼定義一個指令（directive）。

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',
      scope: false,
      controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
      controllerAs: 'stringAlias',
      require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'],
      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;
  });

通過前面的分析(directive: invokeLater('$compileProvider', 'directive')),我們可以知道上面的代碼會最終調用$compileProvider.directive。

2.$compileProvider.directive

  var hasDirectives = {},//定義用於存儲指令的對象
      Suffix = 'Directive',
      COMMENT_DIRECTIVE_REGEXP = /^\s*directive\:\s*([\w\-]+)\s+(.*)$/,
      CLASS_DIRECTIVE_REGEXP = /(([\w\-]+)(?:\:([^;]+))?;?)/,
      ALL_OR_NOTHING_ATTRS = makeMap('ngSrc,ngSrcset,src,srcset'),
      REQUIRE_PREFIX_REGEXP = /^(?:(\^\^?)?(\?)?(\^\^?)?)?/;
  /**
   * @ngdoc method
   * @name $compileProvider#directive
   * @kind function
   *
   * @description
   * Register a new directive with the compiler.
   *
   * @param {string|Object} name Name of the directive in camel-case (i.e. <code>ngBind</code> which
   *    will match as <code>ng-bind</code>), or an object map of directives where the keys are the
   *    names and the values are the factories.
   * @param {Function|Array} directiveFactory An injectable directive factory function. See
   *    {@link guide/directive} for more info.
   * @returns {ng.$compileProvider} Self for chaining.
   */
   this.directive = function registerDirective(name, directiveFactory) {
    assertNotHasOwnProperty(name, 'directive');
    if (isString(name)) {
      assertValidDirectiveName(name);
      assertArg(directiveFactory, 'directiveFactory');
      if (!hasDirectives.hasOwnProperty(name)) {
        hasDirectives[name] = [];
        $provide.factory(name + Suffix, ['$injector', '$exceptionHandler',//這里在定義指令的服務,比如注冊了`test`這樣的一個指令,這里就會定義個`testDirective`的服務.
          function($injector, $exceptionHandler) {//注意這個匿名函數,將在需要獲取指令的是否被執行,所以當這個函數執行時,所有的指令的定義都放入了hasDirectives數組
            var directives = [];
            forEach(hasDirectives[name], function(directiveFactory, index) {//注意這里的directiveFactory是從數組中取出的元素而不是前面函數的參數
              try {
                var directive = $injector.invoke(directiveFactory);
                if (isFunction(directive)) {
                  directive = { compile: valueFn(directive) };
                } else if (!directive.compile && directive.link) {
                  directive.compile = valueFn(directive.link);
                }
                directive.priority = directive.priority || 0;
                directive.index = index;
                directive.name = directive.name || name;
                directive.require = directive.require || (directive.controller && directive.name);
                directive.restrict = directive.restrict || 'EA';
                var bindings = directive.$$bindings =
                    parseDirectiveBindings(directive, directive.name);//這個parseDirectiveBindings需要分析
                if (isObject(bindings.isolateScope)) {
                  directive.$$isolateBindings = bindings.isolateScope;
                }
                directive.$$moduleName = directiveFactory.$$moduleName;
                directives.push(directive);
              } catch (e) {
                $exceptionHandler(e);
              }
            });
            return directives;
          }]);
      }
      hasDirectives[name].push(directiveFactory);//這里可以看到指令可以同名,一個指令名對應的是一個指令數組
    } else {
      forEach(name, reverseParams(registerDirective));//可以數組的方式,成批量的注冊指令
    }
    return this;
  };

請注意代碼的執行數序。
a.在第一注冊某個執行時(比如現在注冊了兩個test執行),那么第一次調用這個函數注冊指令時,會定一個testDirective的服務,且將該指令的工廠函數壓入hasDirectives['test']
b.當再次注冊一個與test同名的另一個指令時,僅是將其工廠函數壓入hasDirectives['test']
c.當指令需要時,框架會調用testDirectiveProvider.$get(也就是testDirective的工廠方法)制造一個directives數組

3.parseDirectiveBindings

  function parseIsolateBindings(scope, directiveName, isController) {
    var LOCAL_REGEXP = /^\s*([@&]|=(\*?))(\??)\s*(\w*)\s*$/;

    var bindings = {};

    forEach(scope, function(definition, scopeName) {
      var match = definition.match(LOCAL_REGEXP);

      if (!match) {
        throw $compileMinErr('iscp',
            "Invalid {3} for directive '{0}'." +
            " Definition: {... {1}: '{2}' ...}",
            directiveName, scopeName, definition,
            (isController ? "controller bindings definition" :
            "isolate scope definition"));
      }

      bindings[scopeName] = {
        mode: match[1][0],
        collection: match[2] === '*',
        optional: match[3] === '?',
        attrName: match[4] || scopeName
      };
    });

    return bindings;
  }

  function parseDirectiveBindings(directive, directiveName) {
    var bindings = {
      isolateScope: null,
      bindToController: null
    };
    if (isObject(directive.scope)) {//指令對象中scope==true 或者 scope是一個對象時 
      if (directive.bindToController === true) {
        bindings.bindToController = parseIsolateBindings(directive.scope, //解析scope對象中的表達式
                                                         directiveName, true);
        bindings.isolateScope = {};
      } else {
        bindings.isolateScope = parseIsolateBindings(directive.scope,
                                                     directiveName, false);
      }
    }
    if (isObject(directive.bindToController)) {
      bindings.bindToController =
          parseIsolateBindings(directive.bindToController, directiveName, true);
    }
    if (isObject(bindings.bindToController)) {
      var controller = directive.controller;
      var controllerAs = directive.controllerAs;
      if (!controller) {
        // There is no controller, there may or may not be a controllerAs property
        throw $compileMinErr('noctrl',
              "Cannot bind to controller without directive '{0}'s controller.",
              directiveName);
      } else if (!identifierForController(controller, controllerAs)) {
        // There is a controller, but no identifier or controllerAs property
        throw $compileMinErr('noident',
              "Cannot bind to controller without identifier for directive '{0}'.",
              directiveName);
      }
    }
    return bindings;
  }

二、給出一幅圖說明angular的"編譯原理"

1.在定義或者注冊指令,最終是以延遲調用$compileProvider.Directive來完成 2.編譯階段,主要工作是收集dom元素上引用到的指令,編譯函數將返回一個"鏈接函數"用戶完成和$scope的鏈接. 3.鏈接過程,將$scope與dom建立聯系,指令指令中定義的link函數

由於$compile這部分的代碼過於復雜,本期暫且講到這里,下期繼續
上一期:angular源碼分析：angular中臟活累活的承擔者之$interpolate
下一期:angular源碼分析：$compile服務——指令的編寫