angularjs源码笔记(1.2)--directive template

{
  template: '<div>22222</div>',
  replace: true, //false
  link: function () {
    ...
  }
}

if (directive.template) {
  hasTemplate = true;
  // 不允许同级存在多个directive配置了template
  assertNoDuplicate('template', templateDirective, directive, $compileNode);
  templateDirective = directive;
  
  // template可以为function，来执行返回string，最终需要一个string的字符模板
  directiveValue = (isFunction(directive.template))
      ? directive.template($compileNode, templateAttrs)
      : directive.template;
  
  // 转化{{ or }}为自定义符号
  directiveValue = denormalizeTemplate(directiveValue);
  
  // 是否整体替换
  if (directive.replace) {
    replaceDirective = directive;
    if (jqLiteIsTextNode(directiveValue)) {
      $template = [];
    } else {
      $template = jqLite(wrapTemplate(directive.type, trim(directiveValue)));
    }
    // 当template不是element而是直接textNode的，这儿会报错！
    compileNode = $template[0];

    if ($template.length != 1 || compileNode.nodeType !== 1) {
      throw $compileMinErr('tplrt',
          "Template for directive '{0}' must have exactly one root element. {1}",
          directiveName, '');
    }
    
    // 将$compileNode替换成compileNode即模板node
    replaceWith(jqCollection, $compileNode, compileNode);

    var newTemplateAttrs = {$attr: {}};
    
    // 对于替换好的模板进行directive的收集
    var templateDirectives = collectDirectives(compileNode, [], newTemplateAttrs);
    // 分离出还没有编译的directives
    var unprocessedDirectives = directives.splice(i + 1, directives.length - (i + 1));

    if (newIsolateScopeDirective) {
      // 给每个templateDirectives做好isolateScope的标记
      markDirectivesAsIsolate(templateDirectives);
    }
    
    // 替换好的node需要继续编译，而继续编译的directive由之前没有编译完的directive和新收集的directive组成
    // directives = unprocessedDirectives + templateDirectives
    directives = directives.concat(templateDirectives).concat(unprocessedDirectives);
    mergeTemplateAttributes(templateAttrs, newTemplateAttrs);

    ii = directives.length;
  } else {
    $compileNode.html(directiveValue);
  }
}

{
  templateUrl: '/user.html',
  replace: true, //false
  link: function () {
    ...
  }
}

if (directive.templateUrl) {
  hasTemplate = true;
  assertNoDuplicate('template', templateDirective, directive, $compileNode);
  templateDirective = directive;

  if (directive.replace) {
    replaceDirective = directive;
  }

  nodeLinkFn = compileTemplateUrl(directives.splice(i, directives.length - i), $compileNode,
      templateAttrs, jqCollection, hasTranscludeDirective && childTranscludeFn, preLinkFns, postLinkFns, {
        controllerDirectives: controllerDirectives,
        newIsolateScopeDirective: newIsolateScopeDirective,
        templateDirective: templateDirective,
        nonTlbTranscludeDirective: nonTlbTranscludeDirective
      });
  // 这里很重要！表示后续的directives都不需要执行了，改在compileTemplateUrl中异步执行
  ii = directives.length;
} else if (directive.compile) {
  // ...
}

function compileTemplateUrl(directives, $compileNode, tAttrs,
        $rootElement, childTranscludeFn, preLinkFns, postLinkFns, previousCompileContext) {
  var linkQueue = [],
      afterTemplateNodeLinkFn,
      afterTemplateChildLinkFn,
      beforeTemplateCompileNode = $compileNode[0],
      origAsyncDirective = directives.shift(),
      // The fact that we have to copy and patch the directive seems wrong!
      derivedSyncDirective = extend({}, origAsyncDirective, {
        templateUrl: null, transclude: null, replace: null, $$originalDirective: origAsyncDirective
      }),
      templateUrl = (isFunction(origAsyncDirective.templateUrl))
          ? origAsyncDirective.templateUrl($compileNode, tAttrs)
          : origAsyncDirective.templateUrl,
      type = origAsyncDirective.type;
  
  // 清空$compileNode
  $compileNode.empty();
  
  // 异步请求模板
  $http.get($sce.getTrustedResourceUrl(templateUrl), {cache: $templateCache}).
    success(function(content) {
      // ...
    }).
    error(function(response, code, headers, config) {
      throw $compileMinErr('tpload', 'Failed to load template: {0}', config.url);
    });
  
  // 返回异步延迟方法
  return function delayedNodeLinkFn(ignoreChildLinkFn, scope, node, rootElement, boundTranscludeFn) {
   // ... 
   
  };
}

  function delayedNodeLinkFn(ignoreChildLinkFn, scope, node, rootElement, boundTranscludeFn) {
    var childBoundTranscludeFn = boundTranscludeFn;
    if (linkQueue) {
      // 保存各种参数
      linkQueue.push(scope);
      linkQueue.push(node);
      linkQueue.push(rootElement);
      linkQueue.push(childBoundTranscludeFn);
    } 
    // 当这个模板已经请求回来并且编译(compile)过就直接执行不需要在queue里缓存等待执行
    else {
      if (afterTemplateNodeLinkFn.transcludeOnThisElement) {
        childBoundTranscludeFn = createBoundTranscludeFn(scope, afterTemplateNodeLinkFn.transclude, boundTranscludeFn);
      }
      // 执行nodeLinkFn
      afterTemplateNodeLinkFn(afterTemplateChildLinkFn, scope, node, rootElement, childBoundTranscludeFn);
    }
  };

var compileNode, tempTemplateAttrs, $template, childBoundTranscludeFn;

content = denormalizeTemplate(content);

// 是否整体替换
if (origAsyncDirective.replace) {
  if (jqLiteIsTextNode(content)) {
    $template = [];
  } else {
    $template = jqLite(wrapTemplate(type, trim(content)));
  }
  compileNode = $template[0];

  if ($template.length != 1 || compileNode.nodeType !== 1) {
    throw $compileMinErr('tplrt',
        "Template for directive '{0}' must have exactly one root element. {1}",
        origAsyncDirective.name, templateUrl);
  }

  tempTemplateAttrs = {$attr: {}};
  replaceWith($rootElement, $compileNode, compileNode);
  var templateDirectives = collectDirectives(compileNode, [], tempTemplateAttrs);

  if (isObject(origAsyncDirective.scope)) {
    markDirectivesAsIsolate(templateDirectives);
  }
  // 在调用前已经将执行过的directive splic删除掉了，所以这边跟上稍许不同，但本质一样
  directives = templateDirectives.concat(directives);
  mergeTemplateAttributes(tAttrs, tempTemplateAttrs);
} else {
  compileNode = beforeTemplateCompileNode;
  $compileNode.html(content);
}

// ----- 到这边处理方式逻辑跟文本template的几乎一样 ------

// directives 没有包含本directive，所以需要加入
directives.unshift(derivedSyncDirective);

// 类似于compileNodes中调用applyDirectivesToNode返回nodeLinkFn
afterTemplateNodeLinkFn = applyDirectivesToNode(directives, compileNode, tAttrs,
    childTranscludeFn, $compileNode, origAsyncDirective, preLinkFns, postLinkFns,
    previousCompileContext);
forEach($rootElement, function(node, i) {
  if (node == compileNode) {
    $rootElement[i] = $compileNode[0];
  }
});
// 类似于compileNodes中递归调用compileNodes处理childNodes
afterTemplateChildLinkFn = compileNodes($compileNode[0].childNodes, childTranscludeFn);

// 需要延迟执行的link阶段方法
while(linkQueue.length) {
  var scope = linkQueue.shift(),
      beforeTemplateLinkNode = linkQueue.shift(),
      linkRootElement = linkQueue.shift(),
      boundTranscludeFn = linkQueue.shift(),
      linkNode = $compileNode[0];

  if (beforeTemplateLinkNode !== beforeTemplateCompileNode) {
    var oldClasses = beforeTemplateLinkNode.className;

    if (!(previousCompileContext.hasElementTranscludeDirective &&
        origAsyncDirective.replace)) {
      // it was cloned therefore we have to clone as well.
      linkNode = jqLiteClone(compileNode);
    }

    replaceWith(linkRootElement, jqLite(beforeTemplateLinkNode), linkNode);

    // Copy in CSS classes from original node
    safeAddClass(jqLite(linkNode), oldClasses);
  }
  if (afterTemplateNodeLinkFn.transcludeOnThisElement) {
    childBoundTranscludeFn = createBoundTranscludeFn(scope, afterTemplateNodeLinkFn.transclude, boundTranscludeFn);
  } else {
    childBoundTranscludeFn = boundTranscludeFn;
  }
  afterTemplateNodeLinkFn(afterTemplateChildLinkFn, scope, linkNode, $rootElement,
    childBoundTranscludeFn);
}
// 将queue设置为null，表示该directive已经获取成功并且compile完成，可以直接调用
linkQueue = null;