【问题标题】:Can you explain the ngList Directive你能解释一下 ngList 指令吗
【发布时间】:2013-10-17 02:00:32
【问题描述】:

我有 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) {:我需要理解这一点,因为我将尝试实现类似的东西
  • require: 'ngModel':为什么需要 ngModel

【问题讨论】:

标签: javascript angularjs angularjs-directive


【解决方案1】:

首先,感谢阅读源代码!

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

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

简而言之,请记住 Angular 必须跟踪 ngModel 数据的 DOM 表示以及 Angular 模型的表示,$parsers 负责将 ngModel 数据的 DOM 端表示转换为 Angular 模型视图的数据。 $formatters 获取模型视图并将其转换为 DOM 适当的表示形式。所以它们是一对, $parsers 从 DOM 到模型, $formatters 回去。

最后,ngModelngList 处理 ngModel 数据。所以它需要找到一个 ngModel 指令,该指令包含 ngList 应该处理的数据(这让我们绕了一圈,回到 ctrl

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-09-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-07-06
    • 2010-10-05
    相关资源
    最近更新 更多