Question

我试图在表单中添加input元素。但是，表单是动态的。如果我手动将元素放在页面中，它可以工作，但是如果我使用$ 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>

My 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秒$ timeout-function

中

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中的示例。

Angularjs使用$ compile为动态字段添加验证

1 个答案: