带有集成验证的Angularjs通用输入指令_Angularjs_Validation_Generics_Directive

带有集成验证的Angularjs通用输入指令

angularjs validation generics

带有集成验证的Angularjs通用输入指令,angularjs,validation,generics,directive,Angularjs,Validation,Generics,Directive,我一直在尝试编写一个带有集成验证的通用输入指令。但我似乎无法得到解雇ng秀的认可我的猜测是，我真的不知道这些项目是什么时候由angular评估并添加到观察列表中的，但我不确定我的实际控制更加复杂，但我已经创建了一个简化版本来说明这个问题。使用inspector查看生成的HTML看起来应该可以工作。我错过了什么？以下是：对于其他有类似问题的人。谢谢你的评论，它引导我回答。见下面修订的代码。问题是在隔离作用域中访问表单，以及试图在span中使用表单名称而不是scope.form对象。

我一直在尝试编写一个带有集成验证的通用输入指令。但我似乎无法得到解雇ng秀的认可

我的猜测是，我真的不知道这些项目是什么时候由angular评估并添加到观察列表中的，但我不确定

我的实际控制更加复杂，但我已经创建了一个简化版本来说明这个问题。使用inspector查看生成的HTML看起来应该可以工作。我错过了什么？以下是：

对于其他有类似问题的人。谢谢你的评论，它引导我回答。见下面修订的代码。问题是在隔离作用域中访问表单，以及试图在span中使用表单名称而不是scope.form对象。请注意要求：[“^form”、“？ngModel”]和链接：scope.form=ctrls[0]和修订的ng show=form.+attr.uname+.$error.minlength 上面的Plunker也进行了修改，以反映更正

    <!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <form name='form'>
    <h1>Validation Test</h1>
    Name: <my-input uname='userName'></my-input><br>
    Not Directive: <div><input class="reqclass" name="city" ng-model="city" ng-minlength="5"/><span ng-show="form.city.$error.minlength">Too short!</span></div><br>
    Phone: <my-input uname='phone'></my-input><br>
    </form>

   <script>
     var app = angular.module('myApp',[]);
     app.directive('myInput',function(){
       return {
        require: ['^form', '?ngModel'],
         replace:false,
         scope:{
           uname:'='
         },
         restrict: 'E',
         template: function(element,attr){
           return '<div><input class="reqclass" name="' + attr.uname + '" ng-model="' + attr.uname + '" ng-minlength="5"/><span ng-show="form.' + attr.uname + '.$error.minlength">Too short!</span></div>'
         },
        link: function(scope, element, attrs, ctrls) {
          scope.form = ctrls[0];
          var ngModel = ctrls[1]; 
          }
       }

     });
   </script>
  </body>
</html>

看起来myForm不存在于您的隔离范围中。好的，我找到了。谢谢Brett，评论很有帮助。

    <!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <form name='form'>
    <h1>Validation Test</h1>
    Name: <my-input uname='userName'></my-input><br>
    Not Directive: <div><input class="reqclass" name="city" ng-model="city" ng-minlength="5"/><span ng-show="form.city.$error.minlength">Too short!</span></div><br>
    Phone: <my-input uname='phone'></my-input><br>
    </form>

   <script>
     var app = angular.module('myApp',[]);
     app.directive('myInput',function(){
       return {
        require: ['^form', '?ngModel'],
         replace:false,
         scope:{
           uname:'='
         },
         restrict: 'E',
         template: function(element,attr){
           return '<div><input class="reqclass" name="' + attr.uname + '" ng-model="' + attr.uname + '" ng-minlength="5"/><span ng-show="form.' + attr.uname + '.$error.minlength">Too short!</span></div>'
         },
        link: function(scope, element, attrs, ctrls) {
          scope.form = ctrls[0];
          var ngModel = ctrls[1]; 
          }
       }

     });
   </script>
  </body>
</html>