Question

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

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

Answer 1

我不相信$ watch功能设置正确。

如果您可以根据自己的意愿更加具体，那将会有所帮助用验证函数在指令中做。

以下是$ watch上Angularjs文档的链接。

[$watch][1]

注意监视表达式是作用域的属性。你不能在$ watch函数中包含任何内容。你说＆＃39; SCOPE＆＃39;请＆＃39; WATCH＆＃39;功能

你应该说的是

＆＃39; SCOPE＆＃39;请＆＃39; WATCH＆＃39;此属性名为＆＃39;在此输入范围属性＆＃39;并在更改时执行此功能，或其他一些自定义逻辑。

我认为这主要是因为你没有看任何东西。你需要观察你所拥有的ng模型才能更新。

将您的功能更改为此...

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

如果你不知道每个ng模型的价值，因为它们可能是使用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

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

你可以观看它的型号，您可以添加您的功能以触发某些事件（模糊，点击，焦点等...）或者只需在调用验证函数validate（value）;

时加载指令即可运行该函数

Angularjs自定义验证指令

1 个答案: