Question

我有一个输入[text]，你键入一个URL，它将使用异步验证器来检查它是否是一个有效的RSS源。

URL就是这样的，其中feed-url是异步验证的指令：

<input type="text"
    name="url"
    ng-model="url"
    ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
    placeholder="http://"
    feed-url
    >

如果用户忘记，我想添加协议（'http://'）。这必须在验证之前完成（因为如果用户忘记因为URL无效，它将不会应用模型。）

我找不到任何办法。任何人都有任何想法？

Answer 1

实际上，正如评论中所建议的那样，这就是$解析器的用途 - 即从View中获取值并“解析”它以使其与模型兼容。

解析器在验证器之前运行。

要添加解析器，您需要添加一个指令：

.directive("fixUrl", function(){
  return {
    require: "?ngModel",
    link: function(scope, element, attrs, ngModel){
      if (!ngModel) return;

      ngModel.$parsers.push(function(val){
        // poor man's implementation
        if (url.indexOf("http") !== 0){
          url = "http://" + url;
        }
        return url;
      });
    }
  };
});

用法：

<input ng-model="url" fix-url>

Answer 2

将此指令添加到元素：

ng-change="validateURL()"

然后在你的控制器中，让$ scope.validateURL成为一个函数，它查看ng-model指向的范围值并相应地改变它。

示例代码：http://jsfiddle.net/tsclaus/skq2ubce/2/

我的例子中的逻辑可以使用改进，但这是一个基本的想法。文本输入的Ng变化有点令人讨厌，因为它会在每次击键时触发，因此可能有更好的方法。 30秒的超时延迟是一种处理方式的例子，并且通常可以工作，只要他们删除了所有的＆＃34; http：//＆＃34;字符串。

我正在使用Angular，如何在验证之前转换模型值？

2 个答案: