Javascript 动态创建控件中的Angular js_Javascript_Jquery_Angularjs

Javascript 动态创建控件中的Angular js

javascript jquery angularjs

Javascript 动态创建控件中的Angular js,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,在我的应用程序中，一个块动态加载控件。加载动态控件后，使用angular js更新数据。但是angular js使用的是静态放置的控件。但不能使用动态控件在这里，我放置了我试图得到的动态代码 <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>

在我的应用程序中，一个块动态加载控件。加载动态控件后，使用angular js更新数据。但是angular 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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#ren”）.html（“名称：”）；
});
});
在输入框中输入一些内容：

点击

这里输入控件动态添加到div。我在控件中输入的文本不会出现在段落上。但如果输入控件位于div static中，则此功能可以正常工作

我做错什么了吗。请解决我的问题。

我更喜欢以角度的方式来做，而不是将jQuery与角度混合。因为直接将

DOM

添加到angular上下文不会像角度编译的DOM那样工作（意味着角度绑定不会在新注入的DOM上工作）。您需要使用

$compile

服务和特定的

范围

编译该DOM，然后再将其注入DOM以启用对其的绑定

让我们遵循这个方法，这是一种完全有角度的方法。按钮上会有

ng click

指令，并将切换一个标志以显示和隐藏元素&如果

ng，我们将使用ng呈现该数组
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>

在输入框中输入一些内容：
名称：

点击
我更喜欢以角度的方式进行操作，而不是将jQuery与角度混合使用。因为直接将DOM
添加到angular上下文不会像角度编译的DOM那样工作（意味着角度绑定不会在新注入的DOM上工作）。您需要使用$compile
服务和特定的范围
编译该DOM，然后再将其注入DOM以启用对其的绑定
让我们遵循这个方法，这是一种完全有角度的方法。按钮上会有ng click
指令，并将切换一个标志以显示和隐藏元素&如果ng，我们将使用ng呈现该数组
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>

在输入框中输入一些内容：
名称：

点击
可能您通过jquery函数附加的html未注册到angular的监视树。因此，当您使用ng模型输入时，它不会触发摘要循环。另外，不建议在dom版本级别使用jquery。在我看来，您应该使用指令而不是jquery dom操作
可能您通过jquery函数附加的html未注册到angular的监视树。因此，当您使用ng模型输入时，它不会触发摘要循环。另外，不建议在dom版本级别使用jquery。在我看来，您应该使用指令而不是jquery dom操作
在文档准备就绪时使用jquery，这样就不会使用angularjs编译。在文档准备就绪时使用jquery，这样就不会使用angularjs编译。