Angularjs 自定义验证指令答案

【问题标题】：Angularjs custom validation directiveAngularjs 自定义验证指令
【发布时间】：2014-03-07 12:04:58
【问题描述】：

您好，我的验证指令有问题。首先，我有创建输入元素的指令，其中我有基于一些参数的指令，这些参数告诉我们是否应该启动这个校准......它看起来像这样：

app.directive('ngAttr', function($compile){
return {
    scope:{},
    link: function (scope, element, attrs){
        var opts = scope.$eval(attrs.ngAttr);

        if(opts.condition){
            element.attr(opts.attrName, opts.condition)
        }
    }
};

});

它根据传递给它的条件添加属性...如果我想有条件地添加指令，我会这样做：

ng-attr="{condition: {{opts.validatePhone}}, attrName:'validate-phone'}"

作为属性 tu 我以前创建输入的指令...问题是 validate-phone 指令仅在创建指令时触发一次，它不会对输入处理程序做出反应...代码validate 指令是：

app.directive('validatePhone', function($compile){
return{
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel){

        function validate(val){
            console.log(val)
        }

        scope.$watch(function() {
            return ngModel.$viewValue;
        }, validate);

    }
};

});

这并不简单，但是当我更改输入时，console.log() 不起作用。

我创建了一个 plunker，如果有人有想法，它会更容易检查...http://plnkr.co/edit/CgVCV58goFS9GKLBtRrw?p=preview

【问题讨论】：

好的，我记录了 validatePhone 指令的范围，它不是应用于表单输入指令的范围，而是父范围，嗯，为什么...

标签： javascript angularjs

【解决方案1】：

我不认为 $watch 功能设置正确。

如果你能更具体地表达你的愿望，那将会有所帮助用验证函数在指令中做。

这是 $watch 上 Angularjs 文档的链接。

[$watch][1]

注意 watch 表达式是作用域的一个属性。您的 $watch 函数中不包含任何内容。你说的是“SCOPE”请“WATCH”功能。

你应该说的是

'SCOPE'请'WATCH'这个名为'enter scope property here'的属性，当它改变时执行这个函数，或者一些其他的自定义逻辑。

我认为主要是你什么都没看。您需要查看要更新的任何东西的 ng-model(s)。

把你的函数改成这个...

  scope.$watch(attrs.ngModel, function( elementValue ) {
    if( !elementValue ){ return; } // return if falsy.
    if( validate( elementValue )){ return elementValue; }
    }); // or something like this.

如果您不知道每个 ng-model 的值，因为它们可能是使用 ng-repeat 动态创建的，并且来自服务器的未知值，您可以执行类似的操作来观看某些内容。

app.directive('mydirective', function(){

  return {
    restrict:'A', // Declares an Attributes Directive.
    require: '?ngModel', // ? checks for parent scope if one exists.

    link: function( scope, elem, attrs, ngModel ){
      if( !ngModel ){ return };

      scope.$watch(attrs.ngModel, function(value){
        if( !value ) { return };
        // do something with validation of ngModel.
      });
    }
  }
});

然后在你的 HTML 中

<input type="text" ng-model="{{ dynamicValue }}" my-directive />

或

<input type="text" ng-model="{{ dynamicValue }}" my-directive="myFunctionName()" />

不过，您必须在指令中添加一些内容才能运行该函数。可能像

这样隔离范围

scope: {
  myDirective: '&'
}

然后在 $watch 指令中你可以像这样运行它

scope.myDirective();

我认为是这样的。

此外，还有很多方法可以使用 Angularjs 进行验证。这是另一个链接。

Here is one way

有几种方法可以连接验证。

你可以$watch它的模型，您可以添加您的函数以触发某些事件（模糊、单击、聚焦等...）或者在指令加载时运行该函数，只需调用验证函数 validate(value);

【讨论】：