LearnKode

6 Example(s) of angular Custom directives


Description :

In this example, We are using Html Attribute type directive for showing page header. We have a directive with name pageHeader. In this directive we are using “restrict: 'A',” which mean this is an Html attribute type directive. We can use this element anywhere on html elements as Html attribute. Example: < div page-header> See below example:


angular Custom directives Example - 1 
<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-app="Example" class="container">
    <div page-header></div>
</body>
</html>

<script>
    angular.module('Example', [])
   .directive("pageHeader", function () {
       return {
           restrict: 'A',
           template: '<div class="jumbotron container"><h3>Example 2:</h3><span>This is attribute type of directive</span></div>'
       }
   })
</script>
Try it » Download Example »

Output

Description :

In this example, We are using Class type directive for showing page header. We have a directive with name pageHeader and we are using “restrict: 'C',” which mean this is an Class type directive. We can use this class anywhere with the HTML class attribute in any html element. Example:<div class="page-header"></div>

See example below:


angular Custom directives Example - 2 
<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-app="Example" class="container">
    <div class="page-header"></div>
</body>
</html>
<script>
    angular.module('Example', [])
   .directive("pageHeader", function () {
       return {
           restrict: 'C',
           template: '<div class="jumbotron container"><h3>Example 3:</h3><span>This is class type of directive</span></div>'
       }
   })
</script>
Try it » Download Example »

Output

Description :

Sometime Its required to pass the value of scope variable to directives so In this example, We are passing scope variable value from controller to directive. In Controller, we have a variable name pageTitle with value "This is Title." and we are accesing it with in directive like:

<div class="jumbotron container"><h3>{{pageTitle}}</h3></div>


angular Custom directives Example - 3 
<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-app="Example" class="container">
    <div ng-controller="exampleController">
        <page-header page-title="pageTitle"></page-header>
    </div>
</body>
</html>
<script>
    angular.module('Example', [])
        .controller("exampleController", function ($scope) {
            $scope.pageTitle = "This is Title.";
        })
   .directive("pageHeader", function () {
       return {
           restrict: 'E',
           pageTitle: '=',
           template: '<div class="jumbotron container"><h3>{{pageTitle}}</h3></div>'
       }
   })
</script>
Try it » Download Example »

Output

Description :

In this example, we are using Html Attribute,Html element and Html class type directive in the same directive that will display page header. It means we can use our directive as a html element, attribute and as well as class too. We have a directive with name pageHeader and defined its parameter like restrict: 'AEC', which mean this will work as “Html attribute”, "Html element" and "Html class" type directive. Example:


, and



angular Custom directives Example - 4 
<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-app="Example" class="container">
    <page-header></page-header>
    <br />
    <div page-header></div>
    <br />
    <div class="page-header"></div>
</body>
</html>
<script>
    angular.module('Example', [])
   .directive("pageHeader", function () {
       return {
           restrict: 'AEC',
           replace: 'true',
           template: '<div class="jumbotron container"><h3>Example 4:</h3><span>This is element and attribute type of directive</span></div>'
       }
   })
</script>
Try it » Download Example »

Output

Description :

In this example, we are using directive for creating left menu and this is a Html Element type of directive. The directive name is LeftMenu and are sending array of string item(items of leftMenu) and these types of items form different pages according to our requirement. See the example:


angular Custom directives Example - 5 
<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-app="Example" class="container">
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="#student">Students</a></li>
            <li><a href="#teacher">Library</a></li>
            <li><a href="#library">Teachers</a></li>
        </ul>
    </div>
    <div ng-controller="studentController" id="student">
        <h3>Students</h3>
        <left-menu list-ltem="listItem"></left-menu>
    </div>
    <div ng-controller="teacherController" id="teacher">
        <h3>Staff</h3>
        <left-menu list-ltem="listItem"></left-menu>
    </div>
    <div ng-controller="libraryController" id="library">
        <h3>Library</h3>
        <left-menu list-ltem="listItem"></left-menu>
    </div>
</body>
</html>

<script>
    angular.module('Example', [])
        .controller('studentController', function ($scope) {
            $scope.listItem = ["Student Detail", "Student Contact", "Student Marks"];
        }).controller('libraryController', function ($scope) {
            $scope.listItem = ["Teacher Detail", "Teacher Contact", "Teacher lacture"];
        }).controller('teacherController', function ($scope) {
            $scope.listItem = ["library Detail", "Books Detail", "Library Contact"];
        }).directive("leftMenu", function () {
            return {
                restrict: 'E',
                listItem: '=',
                template: '<ul><li ng-repeat="i in listItem">{{i}}</li></ul>',
            }
        })
</script>
Try it » Download Example »

Output

Description :

In this example, we are creating a directive and will use that in multiple controller and pass the page-title value from different controller. See the example:


angular Custom directives Example - 6 
<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-app="Example" class="container">
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="#student">Students</a></li>
            <li><a href="#teacher">Library</a></li>
            <li><a href="#library">Teachers</a></li>
        </ul>
    </div>
    <div ng-controller="studentController" id="student">
        <page-header page-title="pageTitle"></page-header>
    </div>
    <div ng-controller="teacherController" id="teacher">
        <page-header page-title="pageTitle"></page-header>
    </div>
    <div ng-controller="libraryController" id="library">
        <page-header page-title="pageTitle"></page-header>
    </div>  
</body>
</html>

<script>
    angular.module('Example', [])
        .controller('studentController', function ($scope) {
            $scope.pageTitle = "Student Detail";
        }).controller('libraryController', function ($scope) {
            $scope.pageTitle = "Library Detail";
        }).controller('teacherController', function ($scope) {
            $scope.pageTitle = "Teacher Detail";
        }).directive("pageHeader", function () {
            return {
                restrict: 'E',
                pageTitle: '=',
                template: '<div class="jumbotron container"><h3>{{pageTitle}}</h3></div>'
            }
        })
</script>
<script src="pageHeader.js"></script>
Try it » Download Example »

Output