AngularJS : 동적으로 생성 된 HTML에 데이터 바인딩

Question

동적으로 HTML 양식 필드를 만드는 스크립트가 있습니다. Angular 지시문을 사용하여 데이터를 바인딩하려고합니다. HTML 요소는 동적으로 생성되기 때문에 페이지로드에 존재하지 않기 때문에 바인딩이 발생하지 않는다고 생각합니다. 다음은 내 HTML입니다.

<div id="form-builder-wrapper"> 
     <form class="form-horizontal" role="form" autocomplete="off"> 
      <ul class="handles"> 
       <br /> 
       <!--Dynamic HTML is being appended here with jQuery--> 
      </ul> 
      <button class="btn btn-primary m-t-20 hide" type="submit">Submit</button> 
     </form> 
</div> 

위의 양식에 내 HTML 요소를 동적으로 추가하고 있습니다. 당신이 볼 수 있듯이

<div class="form-group requiredField" id="element_1" data-type="textbox"> 
    <label for="element_label_1" class="col-sm-3 control-label" ng-bind="element_label_1">First Name</label> 
    <div class="col-sm-9"> 
     <input type="text" class="form-control" name="element_1" id="element_label_1" required=""> 
    </div> 
</div> 

, 내 label 필드에, 나는 ng-bind="element_label_1" 지시를 부착하고있다 : 여기에 추가되는 샘플 요소이다.

<p>Update Label: <input type="text" ng-model="element_label_1"></p> 

을하지만이 작동하지 않습니다 :이 코드로 label를 업데이트하려고 시도하고있다. 함께 묶는 것이 아닙니다. 내가 뭘 잘못하고 있는지 알 겠어?

Answer 1

DOM로드 후 DOM 트리에 추가하는 경우 Angular가 수행하는 컴파일/연결 프로세스가 누락 된 것 같습니다. $ compile 서비스를 사용하여 새 요소를 수동으로 컴파일하고 링크해야합니다.

parent.append(element); 
$compile(element)($scope);