表單驗證和添加了$ compile

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

我在當形式是無效的，必須禁止形式的按鈕。問題是該按鈕從未禁用。

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> 

我jsFindle鏈接：http://jsfiddle.net/8rz6U/1/

這是我在應用程序問題簡單化。 fields指令更復雜，但代碼在這裏。

謝謝

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