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.
