Angular.js源码分析之nginclude

/**
 * 注册新的指令
 */
 this.directive = function registerDirective(name, directiveFactory) {
  assertNotHasOwnProperty(name, 'directive');
  if (isString(name)) {
    // key value 形式
    assertValidDirectiveName(name);
    assertArg(directiveFactory, 'directiveFactory');
    if (!hasDirectives.hasOwnProperty(name)) {
      // 还没有name的Directive工厂
      hasDirectives[name] = [];
      // 加后缀Directive
      $provide.factory(name + Suffix, ['$injector', '$exceptionHandler',
        function($injector, $exceptionHandler) {
          // 此时使用的时候
          // 取得所有的directiveFactory然后执行
          // 得到的就是要如何构建指令的对象（指令对象）
          var directives = [];
          forEach(hasDirectives[name], function(directiveFactory, index) {
            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';
              // 解析scope（bindToController）绑定
              var bindings = directive.$$bindings =
                  parseDirectiveBindings(directive, directive.name);
              if (isObject(bindings.isolateScope)) {
                // 独立scope对象
                directive.$$isolateBindings = bindings.isolateScope;
              }
              // 指定directive的$$moduleName
              // 也就是在moduleInstance对象上暴露directive的时候使用的是
              // invokeLaterAndSetModuleName 给directiveFactory赋值了$$moduleName
              directive.$$moduleName = directiveFactory.$$moduleName;
              directives.push(directive);
            } catch (e) {
              $exceptionHandler(e);
            }
          });
          return directives;
        }]);
    }
    // 添加
    hasDirectives[name].push(directiveFactory);
  } else {
    // 批量注册 指令
    forEach(name, reverseParams(registerDirective));
  }
  return this;
};

$provide.provider('$compile', $CompileProvider).
  directive({
    // 省略
    ngInclude: ngIncludeDirective,
    // 省略
  }).
  directive({
    ngInclude: ngIncludeFillContentDirective
  })

var ngIncludeDirective = ['$templateRequest', '$anchorScroll', '$animate',
                  function($templateRequest,   $anchorScroll,   $animate) {
  return {
    restrict: 'ECA',
    priority: 400,
    terminal: true,// 终止
    transclude: 'element',
    controller: angular.noop,
    compile: function(element, attr) {
      var srcExp = attr.ngInclude || attr.src,
          onloadExp = attr.onload || '',
          autoScrollExp = attr.autoscroll;
      // link函数
      return function(scope, $element, $attr, ctrl, $transclude) {
        var changeCounter = 0,
            currentScope,
            previousElement,
            currentElement;
        
        // 清除上一个
        var cleanupLastIncludeContent = function() {
          if (previousElement) {
            previousElement.remove();
            previousElement = null;
          }
          if (currentScope) {
            currentScope.$destroy();
            currentScope = null;
          }
          if (currentElement) {
            $animate.leave(currentElement).then(function() {
              previousElement = null;
            });
            previousElement = currentElement;
            currentElement = null;
          }
        };
        // 监控其src的值  如果发生变化了需要重新请求得到内容
        // 然后赋值给controller.template
        scope.$watch(srcExp, function ngIncludeWatchAction(src) {
          var afterAnimation = function() {
            if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) {
              $anchorScroll();
            }
          };
          var thisChangeId = ++changeCounter;

          if (src) {
            //set the 2nd param to true to ignore the template request error so that the inner
            //contents and scope can be cleaned up.
            $templateRequest(src, true).then(function(response) {
              if (thisChangeId !== changeCounter) return;
              var newScope = scope.$new();
              ctrl.template = response;
              // 注意没有对response的做其他处理了
              // 真正的处理其实是在ngIncludeFillContentDirective里边

              // 调用$transclude 传入新的scope
              // 关键是这里调用了$transclude
              var clone = $transclude(newScope, function(clone) {
                cleanupLastIncludeContent();
                $animate.enter(clone, null, $element).then(afterAnimation);
              });

              currentScope = newScope;
              currentElement = clone;

              currentScope.$emit('$includeContentLoaded', src);
              scope.$eval(onloadExp);
            }, function() {
              if (thisChangeId === changeCounter) {
                cleanupLastIncludeContent();
                scope.$emit('$includeContentError', src);
              }
            });
            scope.$emit('$includeContentRequested', src);
          } else {
            cleanupLastIncludeContent();
            ctrl.template = null;
          }
        });
      };
    }
  };
}];

var ngIncludeFillContentDirective = ['$compile',
  function($compile) {
    return {
      restrict: 'ECA',
      priority: -400,
      require: 'ngInclude',
      link: function(scope, $element, $attr, ctrl) {
        // 很简单 编译得到的内容 然后link到当然scope
        if (/SVG/.test($element[0].toString())) {
          // WebKit: https://bugs.webkit.org/show_bug.cgi?id=135698 --- SVG elements do not
          // support innerHTML, so detect this here and try to generate the contents
          // specially.
          $element.empty();

          $compile(jqLiteBuildFragment(ctrl.template, document).childNodes)(scope,
              function namespaceAdaptedClone(clone) {
            $element.append(clone);
          }, {futureParentElement: $element});
          return;
        }
        $element.html(ctrl.template);
        $compile($element.contents())(scope);
      }
    };
  }];