- AngularJS provides ngBind and ngBindTemplate for TEXT binding and ngBindHtml directive is used for HTML binding.
- ngBindHtml is present in ngSanitize module.
- In this demo, "We will see the example of ngBind, ngBindTemplate and ngBindHtml directive".
- Below code shows the use of ngBind, ngBindTemplate and ngBindHtml with scope variable.
<!DOCTYPE html> <html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.min.js"></script>
<meta charset="utf-8">
<title>AngularJS ngBind ngBindHtml ngBindTemplate Example</title>
</head>
<body ng-controller="MyController">
<h3>ngBind directive Example</h3>
<h4 ng-bind="myName"></h4>
<h3>ngBindTemplate directive Example</h3>
<h4 ng-bind-template="{{myCountry}} {{myCity}}"></h4>
<h3>ngBindHtml directive Example</h3>
<h4 ng-bind-html="myBlog"></h4>
<script>
var myApp = angular.module("myApp", ['ngSanitize']);
myApp.controller("MyController", ["$scope", function($scope) {
$scope.myName = "Sandeep Kumar Patel";
$scope.myBlog = "Chek my Blog <a href='http://www.tutorialsavvy.com'>My Small Tutorial</a>";
$scope.myCity = "Bangalore";
$scope.myCountry = "India";
}]);
</script>
</body>
</html>
- The output of the above code is embedded in below JSBIN link.
