Textarea與AngularJS模型綁定後有多餘的空間

Question

我使用angularjs來製作SPA。

單擊確定按鈕後，我的對象將被序列化爲JSON字符串並顯示在textarea控件中。

這裏是我的代碼：

• HTML：

  $scope.CreateFoodInfo = function (shownModal) { 
         $scope.serializedInfo = angular.toJson($scope.food); 
         $(shownModal).modal("show"); 
        } 
  

但最後，我有這樣的：

<div id="resultModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Result</h4> 
      </div> 
      <div class="modal-body"> 
        <textarea class="form-control" 
           readonly="readonly" 
           rows="10"> 
         {{serializedInfo}} 
        </textarea> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

    </div> 
</div> 

我的JS代碼部分：

我在我的textarea裏面有多餘的空格。

任何人都可以幫助我解決這個問題嗎？

我使用

• 的JQuery 2.2.1
• AngularJs 1.5.0