angularjs源码笔记(1.3)--directive ctrl & attrs

Controller & Attributes

1. Controller

1.1 配置使用

{
  controller: 'MyController',// 配置当前directive需要的controller
  require: '^myDir',// 通过配置require来获取该directive的controller
  link: function (scope,el,attrs,ctrls) {
    // ... ctrls就是require获取的ctrls
  }
}

1.2 源码

// 由于配置了templateUrl的directive进入异步阶段后会重新执行修改后的directive，
// 所以不需要在这作ctrl统计
if (!directive.templateUrl && directive.controller) {
  directiveValue = directive.controller;
  controllerDirectives = controllerDirectives || {};
  assertNoDuplicate("'" + directiveName + "' controller",controllerDirectives[directiveName],directive,$compileNode);
  controllerDirectives[directiveName] = directive;
}

收集是在compile阶段，但是真正的执行是在link阶段nodeLinkFn中，如下

if (controllerDirectives) {
  forEach(controllerDirectives,function(directive) {
    // locals提供了ctrl必要的scope，attrs等参数供ctrl中注入调用
    var locals = {
      $scope: directive === newIsolateScopeDirective || directive.$$isolateScope ? isolateScope : scope,$element: $element,$attrs: attrs,$transclude: transcludeFn
    },controllerInstance;

    controller = directive.controller;
    if (controller == '@') {
      controller = attrs[directive.name];
    }
   
    // 调用$controller服务生成ctrlInstance
    controllerInstance = $controller(controller,locals);
    
    // 缓存directive -> ctrl，为后续require作准备
    elementControllers[directive.name] = controllerInstance;
    if (!hasElementTranscludeDirective) {
      $element.data('$' + directive.name + 'Controller',controllerInstance);
    }
    
    // 处理配置了controllerAs，绑定到scope上
    if (directive.controllerAs) {
      locals.$scope[directive.controllerAs] = controllerInstance;
    }
  });
}

1.3. require

require定义在directive的配置中，源码处理逻辑：

1). 在applyDirectivesToNode的addLinkFns中赋值给linkFn

pre.require = directive.require;

// ...

post.require = directive.require;

2). 在nodeLinkFn中正式使用刚才保存的require，通过getControllers()获取ctrls注入到linkFn的参数中

linkFn(linkFn.isolateScope ? isolateScope : scope,$element,linkFn.require && getControllers(linkFn.directiveName,linkFn.require,elementControllers),transcludeFn);

3). 详细见getControllers逻辑

function getControllers(directiveName,require,elementControllers) {
  var value,retrievalMethod = 'data',optional = false;
  if (isString(require)) {
    // 判断是否^(可从上层获取)，及是否?(option可选)
    while((value = require.charAt(0)) == '^' || value == '?') {
      require = require.substr(1);
      if (value == '^') {
        retrievalMethod = 'inheritedData';
      }
      optional = optional || value == '?';
    }
    value = null;
 
    // 先本层获取ctrl
    if (elementControllers && retrievalMethod === 'data') {
      value = elementControllers[require];
    }
    // 没有需要的ctrl,就从上层获取
    value = value || $element[retrievalMethod]('$' + require + 'Controller');
 
    // 还是没获取到并且是非可选就抛错
    if (!value && !optional) {
      throw $compileMinErr('ctreq',"Controller '{0}',required by directive '{1}',can't be found!",directiveName);
    }
    return value;
  } else if (isArray(require)) {
    value = [];
    // array循环调用
    forEach(require,function(require) {
      value.push(getControllers(directiveName,elementControllers));
    });
  }
  return value;
}

2. Attributes

对attrs的处理分为收集监听及注入$attrs

2.1 收集attrs

ng在收集directive时顺便收集了attrs，所以都是在collectDirectives()中

// 对所有的attribute进行循环
for (var attr,name,nName,ngAttrName,value,isNgAttr,nAttrs = node.attributes,j = 0,jj = nAttrs && nAttrs.length; j < jj; j++) {
  var attrStartName = false;
  var attrEndName = false;

  attr = nAttrs[j];
  if (!msie || msie >= 8 || attr.specified) {
    name = attr.name;
    value = trim(attr.value);

    // directiveNormalize 用于 xx-abc-d -> xxAbcD 转换
    ngAttrName = directiveNormalize(name);
    // 判断是否ngAttr开头的属性
    if (isNgAttr = NG_ATTR_BINDING.test(ngAttrName)) {
      // snake_case 是 directiveNormalize 反操作
      name = snake_case(ngAttrName.substr(6),'-');
    }

    var directiveNName = ngAttrName.replace(/(Start|End)$/,'');
    if (ngAttrName === directiveNName + 'Start') {
      attrStartName = name;
      attrEndName = name.substr(0,name.length - 5) + 'end';
      name = name.substr(0,name.length - 6);
    }

    nName = directiveNormalize(name.toLowerCase());
    // 缓存映射，paAttr -> pa-attr
    attrsMap[nName] = name;
    if (isNgAttr || !attrs.hasOwnProperty(nName)) {
        attrs[nName] = value;
        // 判断是否可以配置boolean的属性
        if (getBooleanAttrName(node,nName)) {
          attrs[nName] = true;
        }
    }
    addAttrInterpolateDirective(node,directives,nName);
    addDirective(directives,'A',maxPriority,ignoreDirective,attrStartName,attrEndName);
  }
}

这里有个地方，何为可以配置为boolean的属性呢？

function getBooleanAttrName(element,name) {
  
  var booleanAttr = BOOLEAN_ATTR[name.toLowerCase()];

  return booleanAttr && BOOLEAN_ELEMENTS[nodeName_(element)] && booleanAttr;
}

// BOOLEAN_ATTR > multiple,selected,checked,disabled,readOnly,required,open
// BOOLEAN_ELEMENTS > input,select,option,textarea,button,form,details

2.2 $attrs源码

主要分析如何实现监听

$observe: function(key,fn) {
  var attrs = this,$$observers = (attrs.$$observers || (attrs.$$observers = {})),listeners = ($$observers[key] || ($$observers[key] = []));

  listeners.push(fn);
  // 使用$evalAsync为了初始化时也能触发执行fn
  $rootScope.$evalAsync(function() {
    if (!listeners.$$inter) {
      fn(attrs[key]);
    }
  });
  
  // 跟$watch类似返回removeObserve方法，调用后移除监听
  return function() {
    arrayRemove(listeners,fn);
  };
}

$set: function(key,writeAttr,attrName) {
  
  // ...省略

  var $$observers = this.$$observers;
  $$observers && forEach($$observers[observer],function(fn) {
    try {
      fn(value);
    } catch (e) {
      $exceptionHandler(e);
    }
  });
}

3. $controller

ng中很大一部分逻辑都是写在controller中，下面对ctrl的注册及使用作分析

3.1 注册ctrl

module.controller('ctrlName',function () {
  // ...
});

该controller方法是$controllerProvider中的register提供，具体怎么连接起来的后续在inject中作分析

function $ControllerProvider() {
  var controllers = {};

  this.register = function(name,constructor) {
    assertNotHasOwnProperty(name,'controller');
    if (isObject(name)) {
      extend(controllers,name);
    } else {
      controllers[name] = constructor;
    }
  };
  
  // ... 省略
}

其实就是将name -> fn的映射保存下来

3.2 实例化ctrl

由于本质上也是个service所以定义provider就是$get，如下：

this.$get = ['$injector','$window',function($injector,$window) {
  return function(expression,locals) {
    var instance,match,constructor,identifier;

    if(isString(expression)) {
      // 检验是否符合 ctrl as aCtrl 这样的特性
      match = expression.match(CNTRL_REG),constructor = match[1],identifier = match[3];
      // 查找的顺序是已注册的controllers中 > $scope > window全局 
      expression = controllers.hasOwnProperty(constructor)
          ? controllers[constructor]
          : getter(locals.$scope,true) || getter($window,true);
      // 判断expression是否为空
      assertArgFn(expression,true);
    }
    
    // 实例化ctrl，由于需要注入arg所以需要用$injector进行实例化
    instance = $injector.instantiate(expression,locals,constructor);

    if (identifier) {
      if (!(locals && typeof locals.$scope === 'object')) {
        throw minErr('$controller')('noscp',"Cannot export controller '{0}' as '{1}'! No $scope object provided via `locals`.",constructor || expression.name,identifier);
      }

      locals.$scope[identifier] = instance;
    }

    return instance;
  };
}];