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> 

Мой jQuery динамически добавляет мои 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" директиву. Я пытаюсь обновить label с этим кодом:

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

Но это не работает. Он не является обязательным. Любая идея, что я делаю неправильно?

Answer 1

Если вы добавляете в дерево DOM после загрузки DOM, скорее всего, вы пропустили процесс компиляции/связывания, который делает Angular. Вам придется вручную компилировать и связывать свои новые элементы с помощью службы компиляции $.

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