你能解释一下ngList指令吗?

时间:2013-10-17 02:00:33

标签: javascript angularjs angularjs-directive

我有AngularJS开发的ngList指令的代码。我想实现类似的东西,但我不理解代码的一部分。这是代码

var ngListDirective = function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {
      var match = /\/(.*)\//.exec(attr.ngList),
          separator = match && new RegExp(match[1]) || attr.ngList || ',';

      var parse = function(viewValue) {
        var list = [];

        if (viewValue) {
          forEach(viewValue.split(separator), function(value) {
            if (value) list.push(trim(value));
          });
        }

        return list;
      };

      ctrl.$parsers.push(parse);
      ctrl.$formatters.push(function(value) {
        if (isArray(value)) {
          return value.join(', ');
        }

        return undefined;
      });
    }
  };
};

以下是我不理解的部分:

  • function(scope,element,attr,ctrl):ctrl变量。我在哪里可以阅读更多相关信息。
  • ctrl。$ parsers.push(parse); :我在哪里可以阅读有关此用法的更多信息
  • ctrl。$ formatters.push(function(value){:我需要理解这一点,因为我会尝试实现类似的东西
  • 要求:'ngModel':为什么需要ngModel

1 个答案:

答案 0 :(得分:5)

首先,阅读消息来源的荣誉!

ctrl是所需指令的控制者(在这种情况下来自ngModel中的require:

$ parsers和$ formatters- http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

简而言之,请记住Angular必须跟踪ngModel数据的DOM表示以及Angular模型的表示,$解析器处理将ngModel数据的DOM端表示转换为数据的角度模型视图。 $ formatters获取模型视图并将其转换为DOM适当的表示形式。所以他们是一对,$解析器从DOM到模型,$ formatters回归。

最后,ngModelngList处理ngModel个数据。所以它需要找到一个ngModel指令,该指令具有ngList应该处理的数据(这需要我们完整的循环,回到ctrl