if文の実行を一度に止めるには、condtiionチェック？

Question

私はangularjsのフォーム検証のためのカスタム指令を持っていますが、これはif条件がうまく動作しますが、条件は複数回実行されます。誰もこのことから私を助けることができますか？ここで

はUがfalseを返す使用することができ、私の検証directive.js、

app.directive("formValidate", function() { 
    return { 
    require: 'ngModel', 
    template: '<p>Please Fill this Field</p>', 
    //scope: true, 
    link: function(scope, elem, attr) { 

     scope.$watch(attr['ngModel'], function(value) { 

       var NameValidator = angular.element("<p class='NameError'>This field is required!</p>"); 
       var EmailValidator = angular.element("<p class='EmailError'>This Email is Invalid!</p>"); 
       var PhoneValidator = angular.element("<p class='PhoneError'>Enter Number Only</p>"); 

       if (attr['name'] == "name") { 
        if (((value || '').toString()).length == 0) { 

         NameValidator.insertAfter(elem); 
         return; 


        } else { 
         var nameRemove = elem[0].nextSibling; 
         nameRemove.remove(); 

        } 
       } 


       if (attr['name'] == 'email') { 


        if (!(/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/.test(value))) { 
         console.log('1:', value); 
         EmailValidator.insertAfter(elem); 
         return; 

        } else { 
         console.log('2:', value); 

         var emailRemove = elem[0].nextSibling; 
         emailRemove.remove(); 

        } 
       } 
       if (attr['name'] == 'number') { 
        if (!(/^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/.test(value))) { 
         PhoneValidator.insertAfter(elem); 
         return; 

        } else { 
         var phoneRemove = elem[0].nextSibling; 
         phoneRemove.remove(); 

        } 
       } 
      }) 

    } 
} 
}); 

Answer 1

です。実行を停止するために

return false; 

Answer 2

関数の宣言にwatch関数を抽出して、代わりにその名前を使用します。 scope.$watch(attr['ngModel'], namedFn)。

この名前付き機能をデバウンスします。 UnderscoreJSでデバウンス機能を使用できます。監視された変更が到着しなくなった後に、指定された関数が呼び出されるようになります。

scope.$watch(attr['ngModel'], _.debounce(namedFn, 300)); 

Answer 3

これは、XYの問題になりそうだ、それが正常に動作しますが、要素が削除されることはありません、それだけで隠し、

 app.directive("formValidate", function() { 
return { 
    require: 'ngModel', 
    template: '<p>Please Fill this Field</p>', 
    //scope: true, 
    link: function(scope, elem, attr) { 

     scope.$watch(attr['ngModel'], function(value) { 

       var NameValidator = angular.element("<p class='NameError'>This field is required!</p>"); 
       var EmailValidator = angular.element("<p class='EmailError'>This Email is Invalid!</p>"); 
       var PhoneValidator = angular.element("<p class='PhoneError'>Enter Number Only</p>"); 

       if (attr['name'] == "name") { 
        if (((value || '').toString()).length == 0) { 

         NameValidator.insertAfter(elem); 
         return; 


        } else { 
         var nameRemove = elem[0].nextSibling; 
         nameRemove.remove(); 

        } 
       } 


       if (attr['name'] == 'email') { 

        if (!(/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/.test(value))) { 
         if (!scope.emailRemove) { 
          EmailValidator.insertAfter(elem); 
          scope.emailRemove = elem[0].nextSibling; 
         } 
        } else { 
         scope.emailRemove.remove(); 
        } 
       } 
       if (attr['name'] == 'number') { 
        if (!(/^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/.test(value))) { 
         if (!scope.phoneRemove) { 
          PhoneValidator.insertAfter(elem); 
          scope.phoneRemove = elem[0].nextSibling; 
         } 

        } else { 

         scope.phoneRemove.remove(); 

        } 
       } 
      }) 
      // var select = angular.element("<p>Name is Required</p>"); 
      // elem.append(select); 
      // if (attr.name === "name") { 
      //  elem.bind('blur', function() { 
      //   scope.$apply(function() { 
      //    elem.replaceWith(select); 
      //   }) 
      //  }) 
      // } 
    } 
} 
});