AngularJS Example
HTML
<div ng-app="customControl">
<form name="myForm" ng-controller="AppController">
<input type="text" name="myWidget" ng-model="model" />
<br/>
Ng:bind <div ng-bind="model"></div>
Ng:bind-html <div ng-bind-html="model"></div>
<div> From Div: value > </div>
</form>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-sanitize-1.0.1.js"></script>
<style>
.ng-invalid { border: 1px solid red; }
[contenteditable] {
border: 1px solid black;
background-color: white;
min-height: 20px;
}
.ng-invalid {
border: 1px solid red;
}
JavaScript
angular.module('customControl', ['ngSanitize'])
.controller('AppController', function($scope) {
$scope.model = "safe >";
}).filter('decode', function() {
return function(text) {
return angular.element('<div>' + text + '</div>').text();
};
}).directive('ngBind', function(){
return {
compile: function(tElement, tAttrs) {
tAttrs.ngBind += '|decode';
}
};
});