Thursday, February 18, 2016

AngularJS Directives

Directives provide AngularJS core functionality of extending HTML with new attributes.
There are a lot of built-in directives to support diverse functionality to the applications.

e.g.
  • ng-app directive initializes an AngularJS application.
  • ng-init directive initializes application data.
  • ng-model directive binds the HTML controls to application data.

We can also define our own directives depending on requirements.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">

<div my-btn-submit></div>
<my-btn-submit></my-btn-submit>
<div class="my-btn-submit">

<script>
var app = angular.module("myApp", []);
app.directive("myBtnSubmit", function() {
    return {
        restrict : "C",
        template : "<input type='submit' value='Submit'></input>"
    };
});
</script>

</body>
</html>


We can restrict directive invocation with 'restrict' values are:

E - Invoke as Element name
A - Can be used as Attribute
C - Can be use as Class



By default the value is EA, means can be invoked both as, an Element name and attribute name.

No comments:

Post a Comment