Validazione modulo e campi aggiunti con $ compile

Question

Ho una domanda riguardante la convalida del modulo. Non funziona per me nel seguente scenario:

Ho una forma globale, all'interno del modulo i campi dinamici sono resi utilizzando una direttiva. Quella direttiva basata sul tipo del mio campo accoda una direttiva compilata di recente al destino.

Ecco la direttiva:

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

Ho un pulsante nel modulo che deve essere disabilitato quando la forma non è valido. Il problema è che il pulsante non è mai disabilitato.

il codice html:

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

mio link jsFindle: http://jsfiddle.net/8rz6U/1/

Questa è una semplificazione del mio problema in app. le direttive dei campi sono più complesse, ma il codice è qui.

Grazie,

Answer 1

ho trovato una soluzione per questo problema, in questo Q & A: AngularJS: Error: No controller: form. Il trucco è:

1. in primo luogo fanno accoda elemento
2. prossimo fanno compilare

Ecco il mutato frammento di codice:

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

Qui sta lavorando jsfiddle