2. templateUrl

templateUrl配置

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

入口方法源码如下：

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

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

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

主要方法compileTemplateUrl()包含所有细节

function compileTemplateUrl(directives,tAttrs,$rootElement,childTranscludeFn,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) {
   // ... 
   
  };
}

主要两块

1. 异步请求模板然后处理模板
2. 返回延迟执行的方法

从简单的开始--2.返回的延迟方法

原理很简单，就是将调用的参数用queue存起来，等请求完了再去queue里获取执行

function delayedNodeLinkFn(ignoreChildLinkFn,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,childBoundTranscludeFn);
    }
  };

1.异步请求模板然后处理模板

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',origAsyncDirective.name,templateUrl);
  }

  tempTemplateAttrs = {$attr: {}};
  replaceWith($rootElement,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,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,boundTranscludeFn);
  } else {
    childBoundTranscludeFn = boundTranscludeFn;
  }
  afterTemplateNodeLinkFn(afterTemplateChildLinkFn,linkNode,childBoundTranscludeFn);
}
// 将queue设置为null，表示该directive已经获取成功并且compile完成，可以直接调用
linkQueue = null;