如何在角度 js 中获取 contentEditable 元素的更新值？答案

【问题标题】：How to get contentEditable element's updated value in angular js?如何在角度 js 中获取 contentEditable 元素的更新值？
【发布时间】：2017-10-23 08:09:36
【问题描述】：

var myApp = angular.module("problemApp", []);
 
   myApp.controller("RESTCall", function ($scope, $compile, $element, $timeout) {
  $scope.username = 'Adan';
  console.log($scope.username)
  $scope.printValue = function(data) {
     $timeout(function () { 
        $scope.$apply(function(){
           console.log(data);
        });
     });      
  }
});

table td, th{
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<div ng-app="problemApp">
<div  ng-controller="RESTCall">
  <form name="covertToProForm" id=
"table-print">
  <table id="confirm">
    <tr>
        <th>Firstname</th>
        <td contentEditable ng-keyup="printValue(username)" ng-model="username">{{username}}</td>
    </tr>
    <tr>
        <th>Lastname</th>
        <td>Smith</td>
    </tr>
</table>
  </form>
</div>
  
</div>

我有上面的表，它有一个td，它有contentEditable 属性。在编辑td 的值时，我想在控制台中打印它的值。任何帮助将不胜感激！

用给定的答案编辑了 sn-p。它不工作。

【问题讨论】：

docs.angularjs.org/api/ng/type/…

标签： angularjs forms html-table

【解决方案1】：

请忽略我之前的回答。整件事是我们需要将contenteditable 包装在自定义指令中，因为contenteditable 指令不能直接与angular 的ng-model 一起使用，因为它在每次更改时重新渲染dom 元素，导致丢失最近的@987654324 @改变。

这是contenteditable 周围的新wrapper

var app = angular.module('app', []);

app.directive('contenteditable', function() {
  return {
    restrict: "A",
    require: 'ngModel',
    controller: function($scope) {
      $scope.username = 'Adan';
      $scope.printValue = function() {
        console.log($scope.username);
      }
    },
    link: function(scope, element, attrs, myController) {

      element.on('keyup', function() {
        scope.$apply(updateViewModel);
      });

      function updateViewModel() {
        var htmlValue = element.text()
        myController.$setViewValue(htmlValue);
        scope.printValue();
      }
      myController.$render = updateHtml

      function updateHtml() {
        var viewModelValue = myController.$viewValue
        element.text(viewModelValue);

      }
    }
  };
});

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.2.7" data-semver="1.2.7" src="https://code.angularjs.org/1.2.7/angular.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>
  <body>
    <div>
      <h2>{{username}}</h2>
      <form>
        <table>
          <tr>
            <th>Firstname</th>
            <td contenteditable ng-model="username">{{username}}</td>
          </tr>
          <tr>
            <th>Lastname</th>
            <td>Smith</td>
          </tr>
        </table>
      </form>
    </div>
  </body>

</html>

【讨论】：

用给定的答案编辑了 sn-p。它不工作。
当然，让我看看
它适用于 angular1.X，但是对于 angular 2.0 会出现问题