AngularJS Custom Directives example – Angular Directives

AngularJS Custom Directives example – Angular Directives

Also Read : first love marriage in the world

AngularJS Custom Directives example – Angular Directives

An Introduction to the AngularJS Directive

simple Custom directives define are used in AngularJS to simple extend the new functionality of HTML Browser side scripts.and Custom directives means html extends Dom uses are defined using simple “directive” function or methods.AngularJS – Custom Directives

Directives are Simple markers on a HTML DOM element

Like as
-an attribute,
-element name,
-CSS class

Angular Directives : Defining a Directive

Also Read : tamilblasters, 9kmovie, filmygod, hdhub4u, vegamovies, tamilrockers website link and 1377x proxy.


var infinityknow = angular.module('infinityknow', []);

Now, define a directive.

infinityknow.directive(‘myDirective’, function() {
    return {
        restrict: ‘E’,
template: ‘<h1>I made a directive!</h1>’


<body ng-app=infinityknow>

custom directive in angularjs With Example

      <title>AngularJS Custom Directives example - Angular Directives</title>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "infinityknow" ng-controller = "livectrl">
         <weblist name = "live24u"></weblist><br/>
         <weblist name = "tutorial"></weblist>
      <script src = "angular.min.js"></script>
         var infinityknow = angular.module("infinityknow", []);
         infinityknow.directive('weblist', function() {
            var directive = {};
            directive.restrict = 'E';
            directive.template = "weblist: <b>{{}}</b> , Rank No: <b>{{weblist.rankno}}</b>";
            directive.scope = {
               weblist : "=name"
            directive.compile = function(element, attributes) {
               element.css("border", "1px solid #cccccc");
               var linkFunction = function($scope, element, attributes) {
                  element.html("weblist: <b>"+$ +"</b> , Rank No: <b>"+$scope.weblist.rankno+"</b><br/>");
                  element.css("background-color", "red");
               return linkFunction;
            return directive;
         infinityknow.controller('livectrl', function($scope) {
            $scope.live24u = {};
            $ = "live24u websitename";
            $scope.live24u.rankno  = 1;

            $scope.tutorial = {};
            $ = "tutorial websitename";
            $scope.tutorial.rankno  = 2;


READ :  Fetch Object values in array using angular.foreach Example