Angularjs表單驗證在指令上失敗

我在頁面上有一個表單，如果所有表單元素都在頁面http://jsfiddle.net/nkanand4/6za8h8xg/1/上，那麼驗證就很好。Angularjs表單驗證在指令上失敗

<div ng-form="myform"> 
    <div> 
    Name: <input type="text" ng-model="user.name" required name="input"/> 
    </div> 
</div>

然而，這停止工作，如果我做嚮導一種形式，其中每個步驟是使用指令，http://jsfiddle.net/nkanand4/pe17afvq/2/填充的。

<div ng-form="myform"> 
    <form-element step="selectedStep"></form-element> 
</div>

有關如何解決此問題的任何想法將不勝感激。謝謝。

編輯：我最初開始了以NG-包括但丟棄的做法，因爲如果我使用它時，數據不會從步驟1保持到第2步回到步驟1，原因是一個新的範圍當你來回移動時創建。因此，我需要一種方法來保留範圍屬性下的所有數據，如$ scope.data.user.name，以便在請求時可以返回$ scope.data。

來源

2015-10-09 Nitesh Kumar Anand

不要編譯HTML，那你可以讓角做正確的你：

.directive('formElement', function($log, $templateCache, $compile) { 
    return { 
     template: '<div ng-include="\'step\' + selectedStep.step + \'.html\'">', 
     link: function(scope, elem, attrs) { 
      // ... nothing really here 
     } 
    }; 
});

演示：http://jsfiddle.net/pe17afvq/4/

來源

2015-10-09 21:31:06 dfsq

我更新了我的問題，並解釋了爲什麼我不想首先使用ng-include。如果可以，請提出建議。謝謝。 –

終於得到它整理出來。這被報告爲angularJS問題跟蹤器https://github.com/angular/angular.js/issues/7519上的一個錯誤。訣竅是在使用$ compile時返回的鏈接函數中使用克隆。

$compile(html)(scope, function(clone) { 
    elem.empty().append(clone); 
});

相應地更新了我的jsfiddle，它工作正常！

來源

2015-10-16 01:42:49

Angularjs表單驗證在指令上失敗

回答

相關問題