console
angular.module('myApp', []).controller('Ctrl', function($scope) {
$scope.testModel = 123;
})
.directive('contenteditable', function() {
return {
restrict : 'A',
require : '?ngModel',
scope: {},
link : function(scope, element, attrs, ngModel) {
if (!ngModel)
return;
setInterval(function() {
if (angular.element('#contenteditable').scope().form)
console.log(angular.element('#contenteditable').scope().form.userContent);
if (angular.element('#textarea').scope().form)
console.log(angular.element('#textarea').scope().form.userContent);
}, 1000);
ngModel.$render = function() {
element.html(ngModel.$viewValue || '');
};
element.bind('blur keyup change', function() {
scope.$apply(read);
});
read();
function read() {
ngModel.$setViewValue(element.html());
}
}
};
});
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
<div ng-controller="Ctrl">
<form name="myForm">
<div ng-init="form.userContent"></div>
{{testModel}}
<div contenteditable name="myWidget" ng-model="form.userContent" id="contenteditable" required>Change me!</div>
<span ng-show="myForm.myWidget.$error.required">Required!</span>
<hr />
<textarea ng-model="form.userContent" id="textarea"></textarea>
</form>
</div>