As we know that there are also some built in directives provided by angular js. Apart from these we can also create our own custom directives by using .directive function.
When we are naming a directive we must ensure that it should be in camel case name (myCustomDirective), but while envoking the directive we should must use '-' separated name (my-custom-directive). For example :
<body ng-app="myTestDirectiveApp">
<my-custom-directive></my-custom-directive><!--Invoking custom directive-->
<script>
var app = angular.module("myTestDirectiveApp", []);
//Creating custom directive
app.directive("myCustomDirective", function() {
return {
template : "<h1>Created using custom directive!</h1>"**strong text**
};
});
</script>
</body>
We can call a directive by using:Element name, Attribute, Class and Comment. For Example:
By Element Name:
By Attribute:
By Class :
By Comment :
Now we have understand that how we can create a custom directive. We can also add restrictions on our custom directives by using 'restrict' property and with legal predefined values like below.
M - for comment
A - for attribute
E - for element
C - for class
Note : Default value of a custom directive is 'EA'.
Example:
<body ng-app="myTestDirectiveApp">
<my-custom-directive></my-custom-directive><!--Invoking custom directive-->
<script>
var app = angular.module("myTestDirectiveApp", []);
//Creating custom directive
app.directive("myCustomDirective", function() {
return {
template : "<h1>Created using custom directive!</h1>",
restrict : "E"
};
});
</script>
</body>
Above code will create a element type directive.
0 Comment(s)