你能解释一下ngList指令吗?

Can you explain the ngList Directive

本文关键字：ngList 指令 一下 能解释      更新时间：2023-09-26

我有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;
      });
    }
  };
};

以下是我不明白的部分：

  • 函数（范围、元素、属性、控制）：ctrl 变量。我在哪里可以阅读更多关于这个的信息。
  • ctrl.$parsers.push（parse）;：在哪里可以阅读有关此用法的更多信息
  • ctrl.$formatters.push（function（value） {：我需要理解这一点，因为我将尝试实现类似的东西
    • require： 'ngModel
  • '： 为什么需要 ngModel

首先，感谢阅读源代码！

ctrl是所需指令的控制器（在本例中来自require:中找到的ngModel）

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

简而言之，请记住，Angular 必须跟踪ngModel数据的 DOM 表示

以及 Angular 模型的表示，$parsers处理将ngModel数据的 DOM 端表示转换为数据的角度模型视图。 $formatters获取模型视图并将其转换为 DOM 适当的表示形式。 所以它们是一对，$parsers从DOM到模型，$formatters回到模型。

最后，ngModel . ngList处理ngModel数据。 所以它需要找到一个ngModel指令，其中包含ngList应该处理的数据（这需要我们绕一圈，回到ctrl）

相关文章：