javascript - Angular ngchange 不会针对 <pre contenteditable ="true"> 触发

Question

我正在尝试获取一个标签来触发 ng-change 事件，但无济于事。目的是观察 post.content 的变化。代码非常简单，为了简洁起见，省略了部分内容，但它基本上是一个重复的 ng-template，如下所示:

<li ng-repeat="post in posts" data-id="[[post.id]]" data-rank="[[post.sortrank]]" class="post">
    <ng-include src="post.template"></ng-include>
</li>

重复模板:

<script type="text/ng-template" id="postText.html">
    <pre ng-blur="savePost($event, post)" ng-change="changePost()" ng-model="post.content" class="postText" contenteditable="true">[[post.content]]</pre>
</script>

JS:

$scope.savePost = function($event, post) { //This fires correctly
    console.log($event);
    console.log(post);
};

$scope.changePost = function() { //This doesn't fire at all
    console.log("changed!");
};

这可能是因为 contenteditable 属性吗？因为我可以在 Angular 教程网站上获取 ngChange 示例。

Answer 1

您可以使用akatov's angular-contenteditable.js .

来自文档...JS:

angular.module('myapp', ['contenteditable'])
  .controller('Ctrl', ['$scope', function($scope) {
    $scope.model="<i>interesting</i> stuff"
  }])

HTML:

<div ng-controller="Ctrl">
  <span contenteditable="true"
        ng-model="model"
        strip-br="true"
        select-non-editable="true">
  </span>
</div>

Plunker