AngularJS: Tek bir giriş elemanını bir kapsayıcı kullanmadan bir yönerge şablonuna dönüştürün

Question

Giriş alanım için giriş yardım aracı ipucu ile bir sarıcı oluşturmak istiyorum.

Eğer önemli ise, açısal 1.0.7 kullanıyorum.

Transclude kullanıyorum: true, eşzamanlı olarak birkaç farklı alanda hatalara izin vermek için izolat kapsamı ile birlikte, ve hala harici $ kapsamı için ng-model referansını sürdürmek.

Sorun:

Ben giriş öğesinin üzerinde bu yönergeyi kullandığınızda, giriş elemanı yönergesi şablonuna ('Transclude') klonlamak etmez. Bunun sonucunda DOM'de boş bir div öğesi alıyorum, bir ng-transclude özniteliğiyle.

gümlemek: http://plnkr.co/edit/vFB9ih6x2NBmwhAes3Qh?p=preview

kod: Bir yayılma veya div Bu giriş elemanı sarmak Ancak

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

, çocuk girdi elemanı gayet aşılır, ama sonra alamadım Direktifte doğru harici ng modeline (ctrl) bir başvuru.

<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> 

Tam kodu (bağlantı işlevi içinde mantık sorunla ilgili değil, ama benim tam Posta koduna tercih)

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); 

      }); 


     }); 
    } 
}); 

Answer 1

çözüm: $ transclude sadece derlenmiş içeriği alır elemanın, dolayısıyla kendinden olmayan elemanlar.

Açıkçası, uygulamamda bu önemli detayın anlaşılmasından yoksundur.