Contenteditable 与 ng-model 不起作用 [英] Contenteditable with ng-model doesn't work

问题描述

我正在尝试将 contenteditable 的值存储到我的 JS 代码中.但我不知道为什么 ng-model 在这种情况下不起作用.

<input ng-model="inputValue"></input><div>{{inputValue}}</div>//对输入工作正常<小时/><div contenteditable="true" ng-model="contentValue"></div><div>{{contentValue}}</div>//不适用于 contenteditable

有没有办法做到这一点?

参见:JSFiddle

注意:我正在创建一个文本编辑器，因此用户应该看到结果，而我将 HTML 存储在它后面.(即用户看到:这是一个示例！"，而我存储的是:这是一个示例！)

解决方案

contenteditable 标签不能直接与 angular 的 ng-model 一起使用，因为 contenteditable 每次更改都会重新渲染 dom 元素.

您必须为此使用自定义指令包装它:

JS:

angular.module('customControl', ['ngSanitize']).指令('contenteditable'，['$sce'，函数($sce){返回 {限制: 'A',//只在元素属性上激活require: '?ngModel',//获取 NgModelController链接:功能(范围，元素，属性，ngModel){如果(！ngModel)返回；//如果没有 ng-model 则什么都不做//指定 UI 应该如何更新ngModel.$render = function() {element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));};//监听更改事件以启用绑定element.on('blur keyup change', function() {scope.$evalAsync(read);});读();//初始化//将数据写入模型函数读取(){var html = element.html();//当我们清除可编辑的内容时，浏览器会留下一个 <br>在后面//如果提供了 strip-br 属性，那么我们将其去掉if ( attrs.stripBr && html == '<br>' ) {html = '';}ngModel.$setViewValue(html);}}};}]);

HTML

<div 内容可编辑名称="myWidget" ng-model="userContent"带-br=真"需要>改变我！</div><span ng-show="myForm.myWidget.$error.required">必需！</span><小时><textarea ng-model="userContent"></textarea></表单>

从原始文档

中获取

I'm trying to store the value of a contenteditable to my JS code. But I can't find out why ng-model doesn't work in this case.

<div ng-app="Demo" ng-controller="main">
    <input ng-model="inputValue"></input>
    <div>{{inputValue}}</div> // Works fine with an input
    <hr/>
    <div contenteditable="true" ng-model="contentValue"></div>
    <div>{{contentValue}}</div> // Doesn't work with a contenteditable
</div>

Is there a workaround to do that ?

See : JSFiddle

Note: I'm creating a Text editor, so the user should see the result, while I'm storing the HTML behind it. (ie. user see: "This is an example !", while I store: This is an <b>example</b> !)

解决方案

contenteditable tag will not work directly with angular's ng-model because the way contenteditable rerender the dom element on every change.

You have to wrap it with a custom directive for that:

JS:

angular.module('customControl', ['ngSanitize']).
directive('contenteditable', ['$sce', function($sce) {
  return {
    restrict: 'A', // only activate on element attribute
    require: '?ngModel', // get a hold of NgModelController
    link: function(scope, element, attrs, ngModel) {
      if (!ngModel) return; // do nothing if no ng-model

      // Specify how UI should be updated
      ngModel.$render = function() {
        element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
      };

      // Listen for change events to enable binding
      element.on('blur keyup change', function() {
        scope.$evalAsync(read);
      });
      read(); // initialize

      // Write data to the model
      function read() {
        var html = element.html();
        // When we clear the content editable the browser leaves a <br> behind
        // If strip-br attribute is provided then we strip this out
        if ( attrs.stripBr && html == '<br>' ) {
          html = '';
        }
        ngModel.$setViewValue(html);
      }
    }
  };
}]);

HTML

<form name="myForm">
 <div contenteditable
      name="myWidget" ng-model="userContent"
      strip-br="true"
      required>Change me!</div>
  <span ng-show="myForm.myWidget.$error.required">Required!</span>
 <hr>
 <textarea ng-model="userContent"></textarea>
</form>

Source it from the original docs

这篇关于Contenteditable 与 ng-model 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！