फॉर्म प्रमाणीकरण और फ़ील्ड $ संकलन

Question

के साथ जोड़ा गया है मेरे पास फॉर्म सत्यापन के संबंध में एक प्रश्न है। यह निम्नलिखित परिदृश्य में मेरे लिए काम नहीं कर रहा है:

मेरे पास एक वैश्विक रूप है, जिसमें डायनामिक फ़ील्ड निर्देश के उपयोग से प्रस्तुत किए जाते हैं। मेरे क्षेत्र के प्रकार के आधार पर यह निर्देश हाल ही में कयामत के लिए संकलित निर्देश जोड़ता है।

app.directive('render', function($compile){ 
    return { 
     scope: {model: '='}, 
     restrict: 'A', 
     replace: true, 
     template: 
     '<div class="product-option-selector">'+ 
     '</div>', 
    link: function(scope, element){ 
     var directive = null; 

     switch(scope.model.type){ 
     case 'number': 
      directive = 
       '<div data-item-number data-model="model"></div>'; 
      break; 
     case 'text': 
      var directive = 
       '<div data-item data-model="model"></div>'; 
      break; 
     case 'radio': 
      var directive = 
       '<div fg-product-option-selector-radio option="option" item="item" index="index"></div>'; 
      break; 
     } 
     if(!directive) return; 

     directive = '<div>'+directive+'</div>'; 
     $(element).append($compile(directive)(scope)); 
    } 
    } 
}); 

app.directive('item', function(){ 
    return { 
     scope: {model: '='}, 
     restrict: 'A', 
     replace: true, 
     template: 
      '<ng-form name="innerForm">'+ 
      '{{model.name}}'+ 
      '<input type="text" name="innerVal" ng-model="model.value" required></input>'+ 
     '</ng-form>' 
    } 
}); 

app.directive('itemNumber', function(){ 
    return { 
     scope: {model: '='}, 
     restrict: 'A', 
     replace: true, 
     template: 
      '<ng-form name="innerForm">'+ 
      '{{model.name}}'+ 
      '<input type="number" name="innerVal" ng-model="model.value" required></input>'+ 
     '</ng-form>' 
    } 
}); 

मैं प्रपत्र जब प्रपत्र अमान्य है कि निष्क्रिय किया जाना चाहिए में एक बटन है:

यहाँ निर्देश है। समस्या यह है कि बटन कभी अक्षम नहीं होता है।

एचटीएमएल कोड:

<div ng-controller="basicController"> 
<form name="form"> 
    <div ng-repeat="f in fields"> 
     <div data-render data-model="f"></div> 
    </div> 
    <button ng-disabled="form.$invalid">submit</button> 
</form> 
</div> 

मेरी jsFindle लिंक: http://jsfiddle.net/8rz6U/1/

इस एप्लिकेशन में मेरी समस्या का सरलीकरण है। फ़ील्ड निर्देश अधिक जटिल हैं, लेकिन कोड यहां है।

धन्यवाद,

Answer 1

मैं, इस समस्या के लिए समाधान इस क्यू & एक में: AngularJS: Error: No controller: form। चाल है:

1. सबसे पहले तत्व संलग्न करते
2. अगले संकलन

यहाँ बदली हुई कोड स्निपेट है:

directive = '<div>'+directive+'</div>'; 
// Do Not compile the element NOT beeing part of the DOM 
//$(element).append($compile(directive)(scope)); 

// Firstly include in the DOM, then compile 
var result = $(directive).appendTo(element); 
$compile(result)(scope); 

यहाँ jsfiddle