Thursday , August 24 2017
Home / angularjs / AngularJs Custom Directive Example

AngularJs Custom Directive Example

AngularJs directives controls the rendering of HTML markup inside the AngularJs application. AngularJs lets us to extends the HTML attributes to new AngularJs Attributes. In the previous tutorials We have learn about what are AngularJs directives, now it is the time to, how to create AngularJs custom directive ?

AngularJs custom directive :

AngularJs custom directive (s) are used to extend the the functionality of HTML.

We can create the AngularJs custom directive by taking the help of AngularJs module object.

The custom directories are created by using directive() method provided by model object.

A custom directive simply replaces the element on which it applied.

During the initialization time itself  AngularJs executes the custom directives.

Syntax :

<div ng-controller=”myCtrl”>
        <div name-of-drective></div>
</div>

myApp.directive(‘nameOfDirective’, function() {
                        var obj = {};
                        return obj;
})

Poins to Note :

  • While naming directive, the name of the directive should be in camelCase (nameOfDirective)
  • While using the directive, it should be invoke by placing “-”  in it. For instance it should be name-of-directive
  • We can restrict the our custom directive to invoke some methods only. To restrict a custom directive we can use restrict attribute. The possible values are “E” : Element, “A” : Attribute, “C” : Class and “M” : Comment.
  • Default restrict value is “EA”, that means the created custom directive is accessible to elements and attributes.

Types of Angular Custom Directive :

The type of a custom directive is specified, how the directive is used. We can create a custom directive for an element, attribute and for a class.

For Element :

<welcome-directive/>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs Services Example</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
    var myApp = angular.module("myApp", []);
    myApp.directive('welcomeDirective', function() {
        var obj = {};
        obj.restrict = 'E';
        obj.template = '<h2>Welcome {{sname}} : This is Custom Element Directive</h2>';
        return obj;
    })
    myApp.controller("myCtrl", function($scope) {
        $scope.sname = "Chandra Shekhar G";
    })
</script>

</head>
<body ng-app="myApp">
    <h1>AngularJs Custom Directives Demo</h1>
    <hr>
    <div ng-controller="myCtrl">
        <welcome-directive/>
    </div>
</body>
</html>

On the above example, we have applied restriction “E”, means it can be called by element level only. For template attribute we can give .html file also.

Output :

For Attribute :

<div welcome-directive></div>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs Services Example</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
    var myApp = angular.module("myApp", []);
    myApp.directive('welcomeDirective', function() {
        var obj = {};
        obj.restrict = 'A';
        obj.template = '<h2>Welcome {{sname}} : This is Custom Directive</h2>';
        return obj;
    })
    myApp.controller("myCtrl", function($scope) {
        $scope.sname = "Chandra Shekhar G";
    })
</script>

</head>
<body ng-app="myApp">
    <h1>AngularJs Custom Directives Demo</h1>
    <hr>
    <div ng-controller="myCtrl">
        <div welcome-directive></div>
    </div>
</body>
</html>

On the above example, we have applied restriction “A”, means it can be called by attribute level only. For template attribute we can give .html file also.

Output :

For Class :

<div class=”my-customcss”></div>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs Services Example</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
h2 {
    background-color: green;
}
</style>
<script>
    var myApp = angular.module("myApp", []);
    myApp
            .directive(
                    'myCustomcss',
                    function() {
                        var obj = {};
                        obj.restrict = 'C';
                        obj.template = '<h2>Welcome {{sname}} : This is Custom Element Directive</h2>';
                        return obj;
                    })
    myApp.controller("myCtrl", function($scope) {
        $scope.sname = "Chandra Shekhar G";
    })
</script>

</head>
<body ng-app="myApp">
    <h1>AngularJs Custom Directives Demo</h1>
    <hr>
    <div ng-controller="myCtrl">
        <div class="my-customcss"></div>
    </div>
</body>
</html>

Output :

On the above example, we have applied restriction “C”, means it can be called by class level only. For template attribute we can give .html file also.

Happy Learning 🙂

 

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Recommended

AngularJs Custom Service Example

In the previous tutorials we have discussed about what is AngularJs service, what are all …

Leave a Reply

Your email address will not be published. Required fields are marked *