Angular指令将任何过滤器应用为ngModel解析器

时间:2016-07-24 20:54:17

标签: javascript angularjs angular-directive angular-filters

这可能很难解释,所以我会用代码来解释。

我正在尝试创建一个指令,该指令将采用任何角度过滤器并将其作为ng模型解析器应用于输入。 E.g。

<input type="text" ng-model="app.name" model-filter="lowercase" />

会在输入中输入任何内容并应用Angular的小写过滤器,然后再将其放在模型上。

查看:“DaViD” - 型号:“david”

另一个例子是客户过滤器,它从输入中修剪空白。

<input type="text" ng-model="app.name" model-filter="trim" />

查看:“你好” - 型号:“你好”

这是我创建指令的最佳方法。

angular.module('myApp', []).directive('modelFilter', function($filter) {
  return {
    restrict: 'A',
    scope: {},
    require: 'ngModel',

    link: function($scope, $element, $attrs, $ctrl) {

      var filter = $attrs.modelFilter;

      $ctrl.$parsers.push(function(value) {

        value = $filter(filter);

        return value

      });


    }
  };
});

这是我到目前为止所掌握的内容。

https://plnkr.co/edit/c04LW3XZHXIU0HXccgP5?p=preview

除了这不起作用之外,还需要完成另外两个功能

1)它需要使用任何过滤器,甚至是链接在一起并具有参数的过滤器,所以我不确定如何获取属性的全部内容并运行链接在其中的所有过滤器。

2)理想情况下,任何验证器都会在之后运行。例如,如果我有一个过滤器用于删除价格字段中的字母字符,以便用户可以键入“$ 4.00”并且模型将包含“4.00”,那么它将需要验证为数字。不确定是否按正确的顺序完成了这项工作。

0 个答案:

没有答案