The ng-bind-html directive is use to bind the data in HTML element. The ng-bind-html directive is a secure way of binding content to an HTML element.
When you are using AngularJS code to bind data in HTML application, you should check the HTML for dangerous code. By including the "angular-sanitize.js" module in your application you can validate data for any harmful code.
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="message"> </p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.message = "<h2>Hi! i am using AngularJS.</h2>";
});
</script>
ng-click directive will tells the AngularJS what to perfom when HTML element is clicked.
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-click="changeText()">{{text}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.text = "Welcome to AngularJS Controller";
$scope.changeText = function() {
$scope.text = "Oh! You changed my contents";
}
});
</script>
ng-bind-template directive is used when you want to bind more than one expression to your HTML element.
<body>
<p>AngularJS is Developed By:<span ng-app="myApp" ng-bind-template="{{firstName}} {{lastName}}" ng-controller="myCtrl">
</span></p>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Misko";
$scope.lastName = "Hevery";
});
</script>
</body>
The ng-focus directive tells AngularJS what to do when an HTML element gets focus.
The ng-blur directive tells AngularJS what to do when an HTML element loses focus.
Supported by <a>, <input>, <select>, <textarea>
Mouse events occur when the cursor moves over an element, or when a mouse button is clicked on an element