AngularJS ngBind ngBindTemplate ngBindHtml directive Example

                     
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="http://www.tutorialsavvy.com//ajax.go...
<script src="http://www.tutorialsavvy.com//ajax.go...
<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.AngularJS ngBind ngBindHtml ngBindTemplate Example
 •  0 comments  •  flag
Share on Twitter
Published on November 17, 2014 07:40
No comments have been added yet.