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为好。