Javascript Angular JS：动态添加html元素的数据绑定_Javascript_Jquery_Html_Angularjs

Javascript Angular JS：动态添加html元素的数据绑定

javascript jquery html angularjs

Javascript Angular JS：动态添加html元素的数据绑定,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我在angular js中面临双向数据绑定的问题。下面是示例代码 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.

我在angular js中面临双向数据绑定的问题。下面是示例代码

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body ng-app="">

<div>

<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>

<div id="jack">
</div>
<script>
    $("document").ready(function(){
        $("#jack").append("<p ng-bind='name'></p>");
    });
</script>
</body>
</html>


在输入框中输入一些内容：
姓名：
$（“文档”）.ready（函数（）{
$（“#jack”）。追加（）；
});

在这里，我使用jQuery动态地将带有ng bind的段落添加到名为jack的div中

由于某些原因，当我在输入框中键入某些内容时，它并没有反映在带有ng bind属性的段落中

我是angular js的新手，请您为我提供一个简单的解决方案来解决这个问题。

您不能使用jQuery以这种方式在angular之外修改DOM。Angular不知道该绑定，因为它不是由Angular编译的

要解决此特定示例，只需删除jQuery脚本并将HTML更改为：

<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>

HTML

然后可以动态更改指令的模板属性，它将根据新值重新编译和更新DOM

上面的例子应该为您指出正确的方向。我必须警告你，这可能相当危险。如果您正在注入的内容来自某些用户输入，这可能会产生非常严重的安全隐患。请确保您的应用程序不会受到攻击。

首先，我们需要定义应用程序并创建自定义指令

var myApp=angular.module('myApp',[])
                 .controller('myCtrl',function($scope){
                      $scope.name="Your name";   
                 })
   myApp.directive('myDirective', function() {
         return {
                 restrict: 'E',
                 template: '<span data-ng-bind="name"></span>'
         };
   });

var myApp=angular.module（'myApp'，[]）
.controller（'myCtrl'，函数（$scope）{
$scope.name=“您的姓名”；
})
myApp.directive（'myDirective'，function（）{
返回{
限制：'E'，
模板：“”
};
});

在此之后，您需要使用上面创建的指令，如下所示

<my-Directive></my-Directive>

使用ng include代替jquery和$.appends，正如您所建议的那样，代码可以工作。这就是我修改代码之前的情况。我正在尝试使用ajax获取html（嵌入了数据模型和数据绑定），并使用jquery将它们附加到我的表单中。我发布了一个更具体的示例。我希望它能给你指明正确的方向。我的要求改变了。所以，我按照你第一次提出的方法处理了这个问题。好的，我很高兴你成功了。请随意接受答案，作为任何可能找到您问题的人的参考。

var myApp=angular.module('myApp',[])
                 .controller('myCtrl',function($scope){
                      $scope.name="Your name";   
                 })
   myApp.directive('myDirective', function() {
         return {
                 restrict: 'E',
                 template: '<span data-ng-bind="name"></span>'
         };
   });

<my-Directive></my-Directive>