CONTENTEDITABLE与NG-模式行不通 [英] Contenteditable with ng-model doesn't work
问题描述
我想一个 CONTENTEDITABLE
的值存储到我的JS code。但我无法找出原因 NG-模型
在这种情况下是行不通的。
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 ?
请参阅: 的jsfiddle
注意:我创建一个文本编辑器,因此用户应该看到的结果,而我保存它背后的HTML。 (即用户看:这是一个示例!,而我存储:这是一个&LT; B&GT;例如&LT; / B&GT;
)
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不会直接与棱角分明的NG-模式工作,因为这样CONTENTEDITABLE重新呈现在每一个变化的DOM元素。
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:
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>
这篇关于CONTENTEDITABLE与NG-模式行不通的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!