AngularJs Insert HTML into View
AngularJs Insert HTML into View : Sometimes we need to insert HTML into view in AngularJs. There are many ways to do this, here in this tutorial we are going to do this using ng-bind-html. You can also use our online editor to edit and run the code online.
AngularJs Insert HTML into View Example
Let us create a simple example to insert HTML into view using ng-bind-html-
AngularJs Insert HTML into Into View Example:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope,$sce) {
$scope.RenderHtml = function() {
var htmlText = "<h3>Dummy Heading..</h3>";
return $sce.trustAsHtml(htmlText);
};
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<div ng-bind-html="RenderHtml()"></div>
</div>
</div>
</body>
</html>
|
Thus you can easily add html to the view using ng-bind-html directive. If you run the above example it will produce the output something like this –
Advertisements
