属性为ng model的jQuery append（）不起作用_Jquery_Angularjs

属性为ng model的jQuery append（）不起作用

jquery angularjs

属性为ng model的jQuery append（）不起作用,jquery,angularjs,Jquery,Angularjs,当用户执行特定操作时，我试图将带有ng模型属性的新HTML元素附加到p标记，但ng模型不起作用。这是我的密码 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script sr

当用户执行特定操作时，我试图将带有ng模型属性的新HTML元素附加到p标记，但ng模型不起作用。这是我的密码

    <!DOCTYPE html>
<html>

<head>
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
             <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


      <style>
          p{
              height: 600px;
              width: 600px;
              font-size:17px;  
          }



      </style>

    </head>
    <body>



           <div ng-app="myApp" ng-controller="editor">
            <label for="kys_font_size"> font size:</label>

            <select ng-model="kys_selected_font" id="fontsize" name="kys_font_size" ng-options="page for page in FontSize(1, 150)" ng-change="changeFont()">
               </select>   


                <p contenteditable="true"  id="content"   >


                </p>

              <p>{{fonttext}}</p>
          </div>





         <p></p>

         <script>

           var app = angular.module('myApp',[]);
             app.controller('editor',function($scope){

                 $scope.fonttext="hello";
                 $scope.FontSize = function(start, end) {
                                      var size = [];
                                       for (var i = start; i <= end; i++) {
                                       size.push(i);
                                       }
                            return size;
                      };


                           $scope.changeFont = function(){
                               $("#content").append("<p size='3' ng-model='fonttext' id='one'> This is some text </p>");

                              $("#one").focus();
                           }

             });

         </script>
    </body>



</html>


p{
高度：600px；
宽度：600px；
字号：17px；
}
字体大小：


{{fonttext}}

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'editor'，函数（$scope）{
$scope.fontext=“你好”；
$scope.FontSize=函数（开始、结束）{
变量大小=[]；
对于（var i=start；i，ng模型
不起作用，因为Angular
已经阅读了HTML文档，并且已经放置了绑定和东西，所以我们可以说Angular
没有意识到您刚才插入的元素
首先，您应该避免混合使用Angular
和DOM操作（jQuery
），直到您习惯Angular的工作方式
同时，试试这个：
<p contenteditable="true"  id="content">
   <!-- ng-repeat iterates over an angular array variable (within the $scope) and prints the HTML as many times as the number of entries in that array variable -->
   <p ng-repeat="p in appendedParagraphs" size='3' ng-model='fonttext' id='one'> {{p}} </p>
</p>

ng模型
不起作用，因为Angular
已经阅读了HTML文档，并且已经放置了绑定和其他内容，所以我们可以说Angular
不知道您刚刚插入的元素
首先，您应该避免混合使用Angular
和DOM操作（jQuery
），直到您习惯Angular的工作方式
同时，试试这个：
<p contenteditable="true"  id="content">
   <!-- ng-repeat iterates over an angular array variable (within the $scope) and prints the HTML as many times as the number of entries in that array variable -->
   <p ng-repeat="p in appendedParagraphs" size='3' ng-model='fonttext' id='one'> {{p}} </p>
</p>

首先，我不知道您在这里想要实现什么。但是您需要$compile
附加元素。您需要首先将$compile
函数注入控制器
其次，p
标记将不接受任何ng模型
。我将其更改为输入，您可以看到模型值（'Hello'）加载


p{
高度：600px；
宽度：600px；
字号：17px；
}
字体大小：


{{fonttext}}

var-app=angular.module（'myApp'，[]）；
app.controller（'editor'，函数（$scope，$compile）{
$scope.fontext=“你好”；
$scope.FontSize=函数（开始、结束）{
变量大小=[]；
对于（var i=start；i首先，我不知道您在这里试图实现什么。但是您需要$compile
附加元素。您需要首先将$compile
函数注入控制器
其次，p
标记将不接受任何ng模型
。我将其更改为输入，您可以看到模型值（'Hello'）加载


p{
高度：600px；
宽度：600px；
字号：17px；
}
字体大小：


{{fonttext}}

var-app=angular.module（'myApp'，[]）；
app.controller（'editor'，函数（$scope，$compile）{
$scope.fontext=“你好”；
$scope.FontSize=函数（开始、结束）{
变量大小=[]；
对于（var i=start；我可以为您设置一个plunkr吗？@CarsonIp$apply（）不！可以吗explain@SatejS我能知道这将如何帮助我解决这个问题吗？这将帮助人们准确地知道出了什么问题，从而调试您的解决方案。您可以设置一个plunkr吗？@CarsonIp$apply（）不！你能帮我吗explain@SatejS我能知道这将如何帮助我解决这个问题吗？这将帮助人们准确地知道出了什么问题，从而调试您的解决方案。谢谢，但我希望附加而不是隐藏。使用ng模型。有什么方法可以做到吗？您能进一步解释附加的含义吗？ng如果不隐藏/显示，而是附加/取消附加html元素。我做了一些更改，以满足附加行为的角度，而不需要$compile
。但是我重复一遍，您应该尽量避免DOM操作（附加、通过jquery事件处理程序进行操作等）直到你理解并习惯Angular及其工作流程。谢谢，但我希望append而不是hide。使用ng模型。有什么方法可以做到吗？你能进一步解释一下append是什么意思吗？ng如果不隐藏/显示html元素，而是追加/取消追加html元素。我做了一些更改，以满足Angular方式的追加行为，而不需要$compile
。但我重复一遍，在理解并习惯Angular及其工作流之前，应该尽量避免DOM操作（追加、通过jquery事件处理程序进行操作等）。