Question

在我的应用程序中，一个块动态加载控件。加载动态控件后，使用角度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静态中，这个工作正常。

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

Answer 1

我更喜欢以角度方式进行，而不是将jQuery与angular混合。因为直接将DOM添加到角度上下文将不会作为角度编译的DOM工作（意味着角度绑定将不适用于新注入的DOM）。您需要使用特定$compile的{{1}}服务编译该DOM，然后将其注入DOM以启用绑定。

让我们按照这种方式，这是完全角色的方式。按钮上会有scope指令，并会切换标志以显示和隐藏元素＆amp;我们将使用ng-click

渲染该数组

<强> HTML

ng-if

Answer 2

可能你的html通过jquery函数附加，没有注册到angular的观察树。因此，当您输入ng-model输入时，它不会触发摘要周期。此外，不建议在dom版本级别使用jquery这种用法。在我看来，你应该使用指令而不是jquery-dom操作

Angular js动态创建控件

2 个答案: