Угловые js в динамическом создании элементов управления

В моем приложении один блок загружается элементами управления динамически. После загрузки динамических элементов управления данные обновляются с помощью угловых js. Но угловой js работает со статическими помещенными элементами управления. Но не с динамическим контролем.Угловые js в динамическом создании элементов управления

Здесь я помещаю динамический код. Что я пытался получить.

<!DOCTYPE html> 
<html> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
     $("#ren").html('<p>Name: <input type="text" ng-model="name"></p>'); 
    }); 
}); 
</script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app=""> 

<p>Input something in the input box:</p> 
<div id="ren"></div> 
<p ng-bind="name"></p> 

</div> 


<button>click</button> 
</body> 
</html>

Здесь управление вводом динамически добавляется в div. Текст, который я вводил в управление, не соответствует абзацу. Но эта работа прекрасна, если элемент управления вводом находится в div static.

Я делаю неправильно. пожалуйста, решить мою проблему.

источник

2015-12-13 IDEA PREPAID

Вы используете свой jQuery, когда документ готов, поэтому ваш не будет скомпилирован с угловыми. –

Я бы предпочел сделать это угловым способом, а не смешивать jQuery с угловым. Поскольку прямое добавление DOM к угловому контексту не будет работать как угловой скомпилированный DOM (означает, что угловое связывание не будет работать на недавно введенном DOM). Вам необходимо скомпилировать эту DOM с помощью службы $compile с определенным номером scope, прежде чем вводить ее в DOM, чтобы включить привязку к ней.

Позволяет следовать этому пути, который является полностью угловым способом его выполнения. Там будет ng-click директивы на кнопке, и будет переключать флаг, чтобы показать и скрыть элемент & окажу этот массив, используя ng-if

HTML

<p>Input something in the input box:</p> 
    <div id="ren"> 
    <p ng-if="showName">Name: <input type="text" ng-model="name"></p> 
    </div> 
    <p ng-bind="name"></p> 
</div> 
<button type="button" ng-click="showName!=showName">click</button>

источник

2015-12-13 12:30:59

Возможно ваш HTML присоединен через функцию JQuery, является не зарегистрировано в дереве часовых углов. в результате он не вызывает цикл дайджеста при вводе для ввода с ng-моделью. Также не рекомендуется использовать этот вид углов с jquery на уровне издания dom. На мой взгляд, вы должны использовать директиву вместо этой операции jquery-dom.

источник

2015-12-13 12:35:07 erdysson

Угловые js в динамическом создании элементов управления

ответ

Смежные вопросы