jQuery append(),属性ng-model不起作用

Question

jQuery append(),属性ng-model不起作用

我试图在用户执行特定操作时将具有ng-model属性的新HTML元素附加到ap标记,但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>

Run Code Online (Sandbox Code Playgroud)

我怎样才能解决这个问题？有人会深入解释为什么ng-model在这里不起作用？

Answer 1

Roy*_*Roy 5

首先,我不知道你想在这里实现什么.但是你需要$compile附加的元素.您需要$compile先将函数注入控制器.

其次,p标签不接受任何ng-model.我将其更改为输入,您可以看到模型值('Hello')加载.

<!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, $compile) {

      $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($compile("<input size='3' ng-model='fonttext' id='one' /> This is some text")($scope));

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

    });
  </script>
</body>



</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，2 月前
查看次数：	1596 次
最近记录：	8 年，5 月前