Angular.js源码分析之link

compile(element)(scope);

return function publicLinkFn(scope, cloneConnectFn, options) {
  assertArg(scope, 'scope');

  options = options || {};
  var parentBoundTranscludeFn = options.parentBoundTranscludeFn,
    transcludeControllers = options.transcludeControllers,
    futureParentElement = options.futureParentElement;

  // When `parentBoundTranscludeFn` is passed, it is a
  // `controllersBoundTransclude` function (it was previously passed
  // as `transclude` to directive.link) so we must unwrap it to get
  // its `boundTranscludeFn`
  if (parentBoundTranscludeFn && parentBoundTranscludeFn.$$boundTransclude) {
    parentBoundTranscludeFn = parentBoundTranscludeFn.$$boundTransclude;
  }

  if (!namespace) {
    namespace = detectNamespaceForChildElements(futureParentElement);
  }
  var $linkNode;
  if (namespace !== 'html') {
    // When using a directive with replace:true and templateUrl the $compileNodes
    // (or a child element inside of them)
    // might change, so we need to recreate the namespace adapted compileNodes
    // for call to the link function.
    // Note: This will already clone the nodes...
    $linkNode = jqLite(
      wrapTemplate(namespace, jqLite('<div>').append($compileNodes).html())
    );
  } else if (cloneConnectFn) {
    // important!!: we must call our jqLite.clone() since the jQuery one is trying to be smart
    // and sometimes changes the structure of the DOM.
    // 因为在处理transclude的时候也会compile
    // 而返回的那个函数transcludeFn被调用的时候 会传入第二个参数
    // 因为transcludeFn可能会被调用多次 所以这里需要clone一份
    $linkNode = JQLitePrototype.clone.call($compileNodes);
  } else {
    $linkNode = $compileNodes;
  }

  if (transcludeControllers) {
    for (var controllerName in transcludeControllers) {
      $linkNode.data('$' + controllerName + 'Controller', transcludeControllers[controllerName].instance);
    }
  }

  compile.$$addScopeInfo($linkNode, scope);
	
	// 其实就是transclude传入的函数
  if (cloneConnectFn) cloneConnectFn($linkNode, scope);
  // 执行compositeLinkFn函数 里边会执行所有的link函数
  // link 到scope
  if (compositeLinkFn) compositeLinkFn(scope, $linkNode, $linkNode, parentBoundTranscludeFn);
  return $linkNode;
};

function compositeLinkFn(scope, nodeList, $rootElement, parentBoundTranscludeFn) {
  var nodeLinkFn, childLinkFn, node, childScope, i, ii, idx, childBoundTranscludeFn;
  var stableNodeList;

  if (nodeLinkFnFound) {
    // 复制一份
    // 怕nodeLinkFn会动当前元素的元素内容
    // copy nodeList so that if a nodeLinkFn removes or adds an element at this DOM level our
    // offsets don't get screwed up
    var nodeListLength = nodeList.length;
    stableNodeList = new Array(nodeListLength);

    // create a sparse array by only copying the elements which have a linkFn
    for (i = 0; i < linkFns.length; i+=3) {
      idx = linkFns[i];
      stableNodeList[idx] = nodeList[idx];
    }
  } else {
    stableNodeList = nodeList;
  }
	// 遍历收集的所有节点的linkFns
  for (i = 0, ii = linkFns.length; i < ii;) {
    node = stableNodeList[linkFns[i++]];
    nodeLinkFn = linkFns[i++];
    childLinkFn = linkFns[i++];

    if (nodeLinkFn) {
      if (nodeLinkFn.scope) {
        // 有scope的话 并且为true 就要创建新的scope
        // 而独立scope的scope则是在nodeLinkFn执行的时候创建的
        childScope = scope.$new();
        // 给节点增加scope信息
        // 然后通过元素的scope就能得到元素所在的scope了
        compile.$$addScopeInfo(jqLite(node), childScope);
        // 记得destroy的时候销毁
        var destroyBindings = nodeLinkFn.$$destroyBindings;
        if (destroyBindings) {
          nodeLinkFn.$$destroyBindings = null;
          childScope.$on('$destroyed', destroyBindings);
        }
      } else {
      	// 直接使用当前scope
        childScope = scope;
      }

      // 创建childBoundTranscludeFn
      // 这个childBoundTranscludeFn函数会执行nodeLinkFn.transclude
      // 但是会为transclude单独创建的一个scope
      if (nodeLinkFn.transcludeOnThisElement) {
        childBoundTranscludeFn = createBoundTranscludeFn(
            scope, nodeLinkFn.transclude, parentBoundTranscludeFn);

      } else if (!nodeLinkFn.templateOnThisElement && parentBoundTranscludeFn) {
        childBoundTranscludeFn = parentBoundTranscludeFn;

      } else if (!parentBoundTranscludeFn && transcludeFn) {
        childBoundTranscludeFn = createBoundTranscludeFn(scope, transcludeFn);

      } else {
        childBoundTranscludeFn = null;
      }
      // 独立scope的创建新的scope的逻辑是在applyDirectivesToNode返回的nodeLinkFn
      // 中创建的
      nodeLinkFn(childLinkFn, childScope, node, $rootElement, childBoundTranscludeFn,
                 nodeLinkFn);

    } else if (childLinkFn) {
      // 没有nodeLinkFn 但是有childLinkFn 那么直接执行childLinkFn
      // 因为其实在nodeLinkFn中也是会执行childLinkFn的
      childLinkFn(scope, node.childNodes, undefined, parentBoundTranscludeFn);
    }
  }
}
// 给变换transclude创建新的scope
function createBoundTranscludeFn(scope, transcludeFn, previousBoundTranscludeFn) {

  var boundTranscludeFn = function(transcludedScope, cloneFn, controllers, futureParentElement, containingScope) {

    if (!transcludedScope) {
      transcludedScope = scope.$new(false, containingScope);
      transcludedScope.$$transcluded = true;
    }

    return transcludeFn(transcludedScope, cloneFn, {
      parentBoundTranscludeFn: previousBoundTranscludeFn,
      transcludeControllers: controllers,
      futureParentElement: futureParentElement
    });
  };

  return boundTranscludeFn;
}

// 返回的 nodeLinkFn
function nodeLinkFn(childLinkFn, scope, linkNode, $rootElement, boundTranscludeFn, thisLinkFn) {
  var i, ii, linkFn, controller, isolateScope, elementControllers, transcludeFn, $element,
      attrs;

  if (compileNode === linkNode) {
    attrs = templateAttrs;
    $element = templateAttrs.$$element;
  } else {
    $element = jqLite(linkNode);
    attrs = new Attributes($element, templateAttrs);
  }

  if (newIsolateScopeDirective) {
    // 创建独立scope
    isolateScope = scope.$new(true);
  }

  if (boundTranscludeFn) {
    // transcludeFn处理
    // track `boundTranscludeFn` so it can be unwrapped if `transcludeFn`
    // is later passed as `parentBoundTranscludeFn` to `publicLinkFn`
    // 见下边的controllersBoundTransclude定义
    transcludeFn = controllersBoundTransclude;
    transcludeFn.$$boundTransclude = boundTranscludeFn;
  }

  // controllers处理
  if (controllerDirectives) {
  	// 根据收集到的controllerDirectives来得到对应的controller实例
    elementControllers = setupControllers($element, attrs, transcludeFn, controllerDirectives, isolateScope, scope);
  }

  if (newIsolateScopeDirective) {
    // Initialize isolate scope bindings for new isolate scope directive.
    compile.$$addScopeInfo($element, isolateScope, true, !(templateDirective && (templateDirective === newIsolateScopeDirective ||
        templateDirective === newIsolateScopeDirective.$$originalDirective)));
    compile.$$addScopeClass($element, true);
    isolateScope.$$isolateBindings =
        newIsolateScopeDirective.$$isolateBindings;
    // 参见 处理指令绑定
    initializeDirectiveBindings(scope, attrs, isolateScope,
                                isolateScope.$$isolateBindings,
                                newIsolateScopeDirective, isolateScope);
  }
  if (elementControllers) {
  	// 处理独立Scope或者新的继承Scope
    var scopeDirective = newIsolateScopeDirective || newScopeDirective;
    var bindings;
    var controllerForBindings;
    if (scopeDirective && elementControllers[scopeDirective.name]) {
    	// bindToController绑定
      bindings = scopeDirective.$$bindings.bindToController;
      controller = elementControllers[scopeDirective.name];

      if (controller && controller.identifier && bindings) {
        controllerForBindings = controller;
        thisLinkFn.$$destroyBindings =
            initializeDirectiveBindings(scope, attrs, controller.instance,
                                        bindings, scopeDirective);
      }
    }
    for (i in elementControllers) {
      controller = elementControllers[i];
      var controllerResult = controller();

      if (controllerResult !== controller.instance) {
        // 重写掉controller的instance
        controller.instance = controllerResult;
        $element.data('$' + i + 'Controller', controllerResult);
        if (controller === controllerForBindings) {
        	// 此时也就意味着是上边有bindToController的情况
        	// 由于controller的instance的实例都变了 所以这里需要重新初始化
          // Remove and re-install bindToController bindings
          thisLinkFn.$$destroyBindings();
          thisLinkFn.$$destroyBindings =
            initializeDirectiveBindings(scope, attrs, controllerResult, bindings, scopeDirective);
        }
      }
    }
  }

  // PRELINKING
  // 先执行preLinkFns中的函数
  for (i = 0, ii = preLinkFns.length; i < ii; i++) {
    linkFn = preLinkFns[i];
    invokeLinkFn(linkFn,
        linkFn.isolateScope ? isolateScope : scope,
        $element,
        attrs,
        // 可以看到如果有require的话 会得到require依赖的对应的controller
        linkFn.require && getControllers(linkFn.directiveName, linkFn.require, $element, elementControllers),
        transcludeFn
    );
  }

  // RECURSION
  // We only pass the isolate scope, if the isolate directive has a template,
  // otherwise the child elements do not belong to the isolate directive.
  // 然后执行子节点的link函数
  var scopeToChild = scope;
  if (newIsolateScopeDirective && (newIsolateScopeDirective.template || newIsolateScopeDirective.templateUrl === null)) {
    scopeToChild = isolateScope;
  }
  childLinkFn && childLinkFn(scopeToChild, linkNode.childNodes, undefined, boundTranscludeFn);

  // POSTLINKING
  // 最后执行自身的postLinkFns
  for (i = postLinkFns.length - 1; i >= 0; i--) {
    linkFn = postLinkFns[i];
    invokeLinkFn(linkFn,
        linkFn.isolateScope ? isolateScope : scope,
        $element,
        attrs,
        linkFn.require && getControllers(linkFn.directiveName, linkFn.require, $element, elementControllers),
        transcludeFn
    );
  }

  // 注入$transclude
  // This is the function that is injected as `$transclude`.
  // Note: all arguments are optional!
  function controllersBoundTransclude(scope, cloneAttachFn, futureParentElement) {
    var transcludeControllers;

    // No scope passed in:
    if (!isScope(scope)) {
      futureParentElement = cloneAttachFn;
      cloneAttachFn = scope;
      scope = undefined;
    }

    if (hasElementTranscludeDirective) {
      transcludeControllers = elementControllers;
    }
    if (!futureParentElement) {
      futureParentElement = hasElementTranscludeDirective ? $element.parent() : $element;
    }
    return boundTranscludeFn(scope, cloneAttachFn, transcludeControllers, futureParentElement, scopeToChild);
  }
}
// 设置controller 主要依赖 $controller
function setupControllers($element, attrs, transcludeFn, controllerDirectives, isolateScope, scope) {
  var elementControllers = createMap();
  for (var controllerKey in controllerDirectives) {
    var directive = controllerDirectives[controllerKey];
    // 在controller中可以注入的东西
    var locals = {
      $scope: directive === newIsolateScopeDirective || directive.$$isolateScope ? isolateScope : scope,
      $element: $element,
      $attrs: attrs,
      $transclude: transcludeFn
    };

    var controller = directive.controller;
    if (controller == '@') {
      // ngController设置的controller的值是@
      // 需要找回属性中的该值
      controller = attrs[directive.name];
    }

    // 调用$controller服务 但是 是延迟的
    var controllerInstance = $controller(controller, locals, true, directive.controllerAs);

    // For directives with element transclusion the element is a comment,
    // but jQuery .data doesn't support attaching data to comment nodes as it's hard to
    // clean up (http://bugs.jquery.com/ticket/8335).
    // Instead, we save the controllers for the element in a local hash and attach to .data
    // later, once we have the actual element.
    elementControllers[directive.name] = controllerInstance;
    if (!hasElementTranscludeDirective) {
      $element.data('$' + directive.name + 'Controller', controllerInstance.instance);
    }
  }
  return elementControllers;
}

function invokeLinkFn(linkFn, scope, $element, attrs, controllers, transcludeFn) {
  try {
    // link函数的执行 参数是固定的
    // scope ele attrs controllers 以及 transcludeFn
    linkFn(scope, $element, attrs, controllers, transcludeFn);
  } catch (e) {
    $exceptionHandler(e, startingTag($element));
  }
}