AngularJS：文本框修改数据无法传递及prettyprint失效求助

问题1：无法获取textarea修改后的数据 #

这个问题的核心是AngularJS的双向数据绑定没有正确设置。你现在的textarea只是把初始值渲染进去，但修改后的内容没有同步回$scope.apexClassWrapper对象里。

解决步骤： #

1. 给textarea添加ng-model指令，绑定到apexClassWrapper.body，这样视图的修改会自动同步到模型中；
2. 顺便修正HTML里的语法错误：你的btn-group-vertical里多了一个多余的</button>标签，需要删除，避免DOM解析异常。

修改后的HTML代码片段：

<pre class="prettyprint">
  <code class="language-java">
    <textarea ng-model="apexClassWrapper.body" ng-change></textarea>
  </code>
</pre>

这样点击Save按钮时，$scope.postdata方法里的apexClassWrapper就会包含修改后的textarea内容了——因为ng-model已经帮你完成了视图到模型的同步。

问题2：Prettify代码高亮不生效 #

Prettify是用来渲染静态代码文本的，它不能直接作用于textarea这种输入控件，而且你把textarea嵌套在pre/code里的写法本身就不符合HTML规范（表单元素不应该放在代码展示标签内）。

解决步骤： #

我们需要把“编辑区域”和“高亮预览区域”分开，同步两者的内容，同时在内容变化时重新触发Prettify的格式化：

1. 调整HTML结构，拆分编辑和预览区域：

<div class="panel-body">
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary" id="editBtn">Edit</button>
  </div>
  <!-- 编辑区域 -->
  <textarea class="form-control" ng-model="apexClassWrapper.body" ng-change="updateHighlight()"></textarea>
  <!-- 高亮预览区域 -->
  <div class="highlight-container">
    <pre class="prettyprint">
      <code class="language-java" ng-bind="apexClassWrapper.body"></code>
    </pre>
  </div>
  <button type="button" class="btn btn-primary" id="saveBtn" ng-click="postdata(apexClassWrapper)">Save</button>
</div>

2. 在JavaScript控制器里添加updateHighlight方法，用来在内容变化时重新触发Prettify：

function OrderFormController($scope, $http) { 
  $http.get("http://localhost:8989/getApexBody").then(function (response) { 
    $scope.apexClassWrapper = response.data;
    // 初始化时触发一次高亮
    setTimeout(function() {
      prettyPrint();
    }, 0);
  }); 

  // 同步内容并更新高亮
  $scope.updateHighlight = function() {
    setTimeout(function() {
      prettyPrint();
    }, 0);
  };

  $scope.postdata = function (apexClassWrapper) { 
    console.log(apexClassWrapper); 
    var dataObj = { 
      name: apexClassWrapper.name, 
      body: apexClassWrapper.body, 
      id: apexClassWrapper.id 
    }; 
    $http.post("http://localhost:8989/modifyApexBody", dataObj) 
     .success(function (data) { 
       $scope.message = data; 
     }) 
     .error(function (data) { 
       alert("failure message: " + JSON.stringify({data: data})); 
     }); 
  }; 
};

额外说明： #

• 使用setTimeout是因为AngularJS的digest周期结束后才会更新DOM，延迟执行能确保Prettify操作的是最新的DOM内容；
• 如果不需要实时预览，也可以只在点击Edit按钮时切换显示textarea和高亮区域，编辑完成后再触发一次Prettify，这样性能会更好。

内容的提问来源于stack exchange，提问作者Nagendra555