Angularjs使用$ compile爲動態字段添加驗證

Question

我試圖將需求添加到表單中的輸入元素。 但是，表單是動態的。如果我手動將元素放置在頁面中，但是如果使用$ compile，則不起作用。

我的HTML：

<div style="padding-left:20px; padding-right:20px"> 
<ng-form name="Myform"> 

       <div id="appendHere"></div> 


       <button type="submit" ng-disabled="Myform.$invalid" class="btn btn-primary">Save</button> 

      </div> 

    </div> 
</ng-form></div> 

我Controlles JS：

'use strict'; 

myapp.controller("CompileController", ["$scope", "$compile", 
    function ($scope, $compile) { 
var $result = $("<ng-form name='form'><div class='form-group'><h5><label class='col-xs-2 col-form-label'>Absence Status</label></h5><div class='col-xs-10'><input class='form-control' required name='AbsenceStatus' type='text' ng-model='requestL.AbsenceStatus'/></div></div></ng-form>").appendTo(angular.element("#appendHere")); 


     $compile($result)($scope); 

    }]); 

任何幫助將高度讚賞。我正在使用angularjs 1.5.8。

Thx，

Answer 1

您可以在控制器中嘗試下面的代碼。它爲我工作。 一個可行的辦法是把它變成0秒$超時功能

var $result = "<ng-form name='form'><div class='form-group'><h5><label class='col-xs-2 col-form-label'>Absence Status</label></h5><div class='col-xs-10'><input class='form-control' required name='AbsenceStatus' type='text' ng-model='requestL.AbsenceStatus'/></div></div></ng-form>"; 
var content = $compile($result)($scope); 
console.log(content); 
$timeout(function(){ 
     var tempElement = document.createElement('div'); 
     tempElement.innerHTML = content[0].innerHTML;  
     document.getElementById('appendHere').appendChild(tempElement.firstChild); 
    }); 

這裏例如jsfiddle爲好。