AngularJS：在不使用容器的情况下将单个输入元素转换为指令模板

我使用角度1.0.7,如果它是重要的.

我正在使用transclude：true,以及isolate范围,以便同时允许多个不同字段的错误,并仍然保持对外部$scope的ng-model引用.

问题：

当我在input元素上使用this指令时,input元素不会克隆(‘Transclude’)到指令模板中.

因此,我在DOM中获得了一个空的div元素,并带有ng-transclude属性.

普拉克：
http://plnkr.co/edit/vFB9ih6x2NBmwhAes3Qh?p=preview

码：

<input data-my-validate-input data-value-required="true" type="password" class="loginItem" placeholder="password" name="password" data-ng-model="formData.password" data-display-name="password">

但是当我将这个输入元素包装在span或div中时,子输入元素被超越了,但是我没有在指令处获得对正确的外部ng-model(ctrl)的引用.

<span data-my-validate-input data-value-required="true" data-display-name="password">
      <input type="password" class="loginItem" placeholder="password" name="password" data-ng-model="formData.password" >    
</span>

完整代码(链接函数内部的逻辑与问题无关,但我更喜欢发布我的完整代码)

directive('myValidateInput',function() {
    return {
        require: 'ngModel',reStrict: 'A',transclude: true,scope: {
            displayName: '@',valuerequired: '@',maxLength: '@',minLength: '@',minLetters: '@',minnumbers: '@'
          },template: '<div class="validationContainer">\
                      <div ng-transclude></div>\
                      <div class="input-Help">\
                        <h4>{{fieldErrorDisplay}}</h4>\
                        <ul>\
                          <li data-ng-repeat="rule in requirementSpec" ng-class="rule.class">\
                              {{rule.msg}}\
                          </li>\
                        </ul>\
                      </div>\
                    </div>',replace: true,link: function(scope,elm,attrs,ctrl) {
                 var validator = function(viewvalue){
                          if(scope.valuerequired && viewValue.length == 0 && (!scope.maxLength && !scope.minLength && !scope.minLetters && !scope.minnumbers)){
                    scope.valid = false;  
                    scope.fieldErrorDisplay = scope.fieldName + ' is required';
                  }
                  else{
                        scope.fieldErrorDisplay = scope.fieldName + ' must meet the following requirements: ';
                        scope.requirementSpec = [];
                        if(scope.minLength){
                          var itemValidity = viewValue.length >= scope.minLength;
                          scope.valid = !itemValidity ? false : scope.valid;
                          var item = {
                            'msg' : 'Must be at least ' + scope.minLength + ' characters long','class' : itemValidity ? 'valid' : undefined
                          };
                          scope.requirementSpec[nameStr].push(item);
                        }
                        else if(scope.valuerequired){
                          var itemValidity = viewValue && viewValue.length >= 1;
                          scope.valid = !itemValidity ? false : scope.valid;
                          var item = {
                            'msg' : 'This field must be filled','class' : itemValidity ? 'valid' : undefined
                          };
                          scope.requirementSpec[nameStr].push(item);
                        }
                        if(scope.maxLength){
                          var itemValidity = viewValue.length <= scope.maxLength;
                          scope.valid = !itemValidity ? false : scope.valid;
                          var item = {
                            'msg' : 'Must be ' + scope.maxLength + ' characters long at most  ','class' : itemValidity ? 'valid' : undefined
                          };
                          scope.requirementSpec[nameStr].push(item);
                        }
                        if(scope.minLetters){
                          var itemValidity = (viewValue && /[A-z]/.test(viewvalue));
                          scope.valid = !itemValidity ? false : scope.valid;
                          var item = {
                            'msg' : 'Must contain at least ' + scope.minLetters + ' letters','class' : itemValidity ? 'valid' : undefined
                          };
                          scope.requirementSpec[nameStr].push(item);
                        }
                        if(attrs.minnumbers){
                          var itemValidity = (viewValue && /\d/.test(viewvalue));
                          scope.valid = !itemValidity ? false : scope.valid;
                          var item = {
                            'msg' : 'Must contain at least' + attrs.minnumbers + ' numbers','class' : itemValidity ? 'valid' : undefined
                          };
                          scope.requirementSpec[nameStr].push(item);
                        }
                  }

                  if(scope.valid) {
                      ctrl.$SETVALidity(nameStr,truE);
                      return viewValue;
                  } else {
                      ctrl.$SETVALidity(nameStr,falsE);                    
                      return undefined;
                  }
             }

             scope.requirementSpec = {};

             ctrl.$parserS.Unshift(function(viewvalue) {
               return validator(viewvalue);
             });
             ctrl.$formatterS.Unshift(function(viewvalue) {
               // var before = scope.$eval(attrs.validateBeforE);
               if(viewValue && viewValue != "" && viewValue.length > 0)
                 return validator(viewvalue);

             });


        });
    }
});