AngularJS - text area text relative to ngBindHtml
Check this working example of above problem solution
http://jsfiddle.net/Shital_D/b9qtj56p/6/
Do the following: 1. Download -sanitize.js Angular
2. Code
var app = angular.module('myApp', ["ngSanitize"]);
app.controller('myController', function($scope,$compile) {
$scope.html = '<p>Your html code</p>';
});
<div ng-app="myApp">
<div ng-controller="myController">
<p ng-bind-html="html"></p>
</div>
</div>
source to share
You can use editing content for editing, not a blank text area.
And if you want a full set of features like these in edit mode use the wysiwyg editors like ckeditor http://ckeditor.com/
source to share
Try this to print the html content text in a textbox
var app = angular.module('myApp', []);
app.controller('Controller', function($scope, $compile) {
$scope.answer = "<ul><li>Participate</li><li>Prove your self</li></ul>";
$scope.answer = angular.element($scope.answer)[0].innerText;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="Controller">
<textarea placeholder="Answer" ng-model="answer"></textarea>
</div>
source to share
You can use $sce.trustAsHtml
to parse another string as HTML and then bind the resulting value using a directive ng-bind-html
like ...
(function() {
angular.module('myApp',[]);
angular.module('myApp')
.controller('myCtrl', myCtrl);
myCtrl.$inject = ['$sce', '$scope', '$log'];
function myCtrl($sce, $scope, $log) {
var self = this;
self.snippet = undefined;
self.snippetHtml = undefined;
activate();
function activate() {
self.snippet = '<ul><li>Hello</li><li>World</li>';
}
$scope.$watch(function() { return self.snippet; }, function(oldVal, newVal) {
self.snippetHtml= $sce.trustAsHtml(newVal);
});
}
}());
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<textarea ng-model="vm.snippet"></textarea>
<div ng-bind-html="vm.snippetHtml"></div>
</div>
As suggested by others ... only do this when you SURE that the data you want to display is safe. Otherwise, you will open the application to attack the script.
source to share
Before you do this. You need angular sanitizer js. And this is my code:
var app = angular.module('ck', ['ngSanitize']);
app.directive('ckEditor', function() {
require: '?ngModel',
link: function(scope, elm, attr, ngModel) {
var ck = CKEDITOR.replace(elm[0]);
if (!ngModel) return;
ck.on('pasteState', function() {
scope.$apply(function() {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function(value) {
ck.setData(ngModel.$viewValue);
};
}
};
});
app.controller("ckController",function($scope){
$scope.myText = "</p>Something is here</p>";
})
Now make your textbox like: <textarea ck-editor ng-model="myData"></textarea>
Now make your div to hold all data like: <p ng-bind-html="myData"></p>
source to share