Question

我试图在用户执行特定操作时将带有ng-model属性的新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>

我该如何解决这个问题？有人会深入解释为什么ng-model不能在这里工作吗？

Answer 1

首先，我不知道你在这里想要达到的目标。但是你需要$compile附加的元素。您需要先将$compile函数注入控制器。

其次，p代码不接受任何ng-model。我将其更改为输入，您可以看到模型值（＆＃39; Hello＆＃39;）加载。

＆＃13;

<!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>

＆＃13;

Answer 2

ng-model无效，因为Angular已经阅读了HTML文档，并且已经放置了绑定和内容，所以我们可以说Angular不知道您刚插入的元素

您应该首先避免混合Angular和DOM manipulation（主要是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>

在Angular Controller之类的内容：

$scope.changeFont = function () {
    if('undefined' === typeof $scope.appendedParagraphs){
        $scope.appendedParagraphs = [];
    }
    $scope.appendedParagraphs.push('whatever you want to append every time'); // in angular appends, and DOM manipulation stuff is not doing directly, you just change the model (arrays, objects, variables...) and the template reacts over it and changes itself
    $("#one").focus();
}

jQuery append（），属性ng-model不起作用

2 个答案: