कोणीयजेएस: कंटेनर

Question

का उपयोग किए बिना एक निर्देश टेम्पलेट में एक इनपुट इनपुट को स्थानांतरित करें, मैं अपने इनपुट फ़ील्ड के लिए एक इनपुट-सहायता टूल टिप के साथ एक रैपर बनाना चाहता हूं।

मैं कोणीय 1.0.7 का उपयोग कर रहा हूं, यदि यह महत्वपूर्ण है।

मैं ट्रांसफर का उपयोग कर रहा हूं: सत्य, कई अलग-अलग क्षेत्रों में त्रुटियों की अनुमति देने के लिए अलग-अलग क्षेत्र के साथ-साथ, और अभी भी बाहरी $ स्कोप के लिए एनजी-मॉडल संदर्भ बनाए रखता है।

समस्या:

जब मैं इनपुट तत्व पर इस निर्देश का उपयोग करें, इनपुट तत्व निर्देश टेम्पलेट में क्लोन नहीं है ('Transclude')।

इसके परिणामस्वरूप मुझे डीओएम पर एक खाली div तत्व मिल रहा है, जिसमें एक एनजी-ट्रांसफर विशेषता है।

बजना: 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"> 

हालांकि जब मैं एक काल या div में इस इनपुट तत्व लपेट, बच्चे इनपुट तत्व ठीक पार है, लेकिन फिर मैं नहीं मिलता है निर्देश पर सही बाहरी एनजी-मॉडल (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); 

      }); 


     }); 
    } 
}); 

Answer 1

समाधान: $ transclude केवल संकलित सामग्री ले जाता है तत्व का, इस प्रकार तत्व स्वयं नहीं है।

स्पष्ट रूप से मुझे अपने कार्यान्वयन में इस महत्वपूर्ण विस्तार की समझ की कमी है।