AngularJS自定義驗證指令

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'}" 

作為我先前創建輸入的指令的屬性，問題是驗證電話指令僅在創建指令時被觸發一次，它對輸入處理程序沒有反應... 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（）無法工作。

我創建了一個插件，所以如果有人有主意，檢查起來會更容易... http://plnkr.co/edit/CgVCV58goFS9GKLBtRrw?p=preview

Answer 1

我不認為$ watch功能設置正確。

如果您可以對驗證功能指令中要執行的操作更具體一些，這將有所幫助。

這是$ watch上Angularjs文檔的鏈接。

[$watch][1]

注意watch表達式是scope的一個屬性。 您的$ watch函數中不包含任何內容。 您說的是“范圍”，請使用“觀看”功能。

你應該說的是

“范圍”請“監視”此屬性（在此處輸入作用域屬性），並在更改時執行此功能或執行其他自定義邏輯。

我認為主要是您什么都不看。 您需要監視任何要更新的ng-model。

將您的功能更改為此...

  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進行驗證。 這是另一個鏈接。

這是一種方法

有幾種連接驗證的方法。

您可以$ watch其模型，可以添加函數以在某些事件（模糊，單擊，焦點等）上觸發，或者僅在指令加載時運行該函數，只需調用您的驗證函數validate（value）;即可。