<!doctype html>
<html ng-app="myApp">
<head>
<script src="G:\\Source\\Repos\\GWD\\Gridsum.WebDissector.Website.ZC\\Gridsum.WebDissector.Website.ZC\\Pages\\dist\\assets\\lib\\angularjs\\angular.js"></script>
<script type="text/javascript">
angular.module('myApp', []).directive('contenteditable', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
// view -> model
elm.bind('blur', function () {
scope.$apply(function () {
ctrl.$setViewValue(elm.html());
});
});
// model -> view
ctrl.$render = function (value) {
elm.html(value);
};
// load init value from DOM
ctrl.$setViewValue(elm.html());
}
};
});
</script>
</head>
<body>
<div contenteditable="true" ng-model="content" title="Click to edit">Some</div>
<pre>model = {{content}}</pre>
<style type="text/css">
div[contentEditable] {
cursor: pointer;
background-color: #D0D0D0;
}
</style>
</body>
</html>