As mentioned, I want to use <p contenteditable="true"> to make a simple text box for user input. How to use
in angular to do two-way data binding?
Thanks!
仅有的幸福2017-05-15 17:02:08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.container{
width:960px;
margin:0 auto;
}
.editor{
margin-right:360px;
border:1px outset black;
height:300px;
padding:30px;
}
.preview{
padding:30px;
float:right;width:300px;
border:1px inset grey;
height:300px;
}
</style>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<p class='container' ng-app="editor">
<p class="preview">{{content }}</p>
<p class='editor' contenteditable="true" ng-model="content"></p>
</p>
<script type="text/javascript">
var app = angular.module('editor', []);
app.directive('contenteditable', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
element.bind('keyup', function() {
scope.$apply(function() {
var html=element.html();
ctrl.$setViewValue(html);
});
});
}
};
});
</script>
</body>
</html>