By kswaughs | Monday, June 13, 2016

AngularJS Directive with arguments

An AngularJS Directive is an extension of HTML with new attributes.

AngularJS provides many built-in directives that offers functionality to our applications like ng-app, ng-repeat.

AngularJS also let us create our own directives. These new directives are created by using .directive function

Use Case

Below Example shows that a custom directive is used to print the list of blog posts available in www.kswaughs.com where the label of the blog post is passed as an attribute of that directive element in the HTML code.

This directive first displays the label that is passed and allows an on click event and calls a rest service to get available blog posts.


HTML & AngularJS code
<!doctype html>
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
    var app = angular.module('DirectiveExample', []);
    app.directive('blogPostSummary', function() {
    
        return {
     
            template: '<div class="ajtitle" ng-click="getBlogPosts()">'+
                      'Posts of {{label}}'+
                      '</div>' +
                      '<ul class="list">'+
                      '<li ng-repeat="entry in myData" >'+
                      '<a class="entry"'+
                      'ng-repeat="link in entry.link | filter:{rel: \'alternate\'}"' +
                      'href="{{link.href}}">{{entry.title.$t}}</a>'+
                      '</li>'+
                      '</ul>',
            scope: {
                label: '@'
            },
     
            link: function(scope, elem, attrs) {
            },
    
            controller : function($scope, $http) {

                $scope.getBlogPosts = function() {

                $http.get(
                    "http://www.kswaughs.com/feeds/posts/summary/-/"+ 
                    $scope.label + "?alt=json")
                    .then( function(response) {
                        $scope.myData = response.data.feed.entry;
                    });
                };
            },
        }; 
  
    });
</script>
</head>
<body>
    <div ng-app="DirectiveExample">
        <blog-post-summary label="AngularJS"></blog-post-summary>
        <blog-post-summary label="Camel"></blog-post-summary>
        <blog-post-summary label="Junit"></blog-post-summary>
    </div>
</body>
</html>

styles.css
.ajtitle { 
padding:10px 0px 10px 15px;
width : 550px;
font-weight : bold;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}

.entry {
text-decoration: none;
color : blue;
}

.list {
list-style: none;
width : 500px;
}

.list li{
 border-bottom:1px solid #e0e0e0;
 padding:10px 0px 10px 0px;
}

Demo : click on below tabs



Recommend this on


2 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. IEEE Final Year projects India Project Centers in India are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes, while specialists like the enjoyment in interfering with innovation. For experts, it's an alternate ball game through and through. Smaller than expected IEEE Final Year project centers ground for all fragments of CSE & IT engineers hoping to assemble. Final Year Projects for CSE It gives you tips and rules that is progressively critical to consider while choosing any final year project point.

    Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining the authors explore the idea of using Java in Big Data platforms.
    Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai


    The Nodejs Training Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

    ReplyDelete