One step ahead: Binding element with event listener in custom directive

Sunday 25 January 2015

Binding element with event listener in custom directive - AngularJS

This program actually started with an intention to explain custom directive and is well going on changing inner html during loading of the page, suddenly I thought that why not bind some event listener to the element with custom directive, so I came up with 2 event listener, mouseenter and mouseleave. Here I am writing the code, Assuming the reader is already aware of some angularjs and so I am explaining a few thing. 'E', 'A', 'C' and 'M' are Element directive, Attribute directive, Class directive and Comment directive. Element directive are directive with custom element name. Attribute directive are directive with custom attribute, Class is for custom class name and comment directive is for comment section inside some i.e. div tag. directive name is the first parameter in the directive declaration and this name is used in the html section.
restrict indicates type of directives.
link set link to the function which actually do something when the page loads.
element[0] is the element whose innerHTML is to be modified.
element.bind actually binds the event to the element.

Just follow the script

I hope you like it.

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <title>AngularJS</title>
    <script src="https://code.angularjs.org/1.0.8/angular.js"></script>
    <script>
app=angular.module('app',[]);
app.controller('MainController',function($scope){
$scope.data="Hello World!";
})

.directive('elementrestriction',function(){
return {
    restrict:'E',
    controller:'MainController',
    link:function(scope,element,attrs) {
        element[0].innerHTML="<b>This is an element</b>";
    }
}
})

.directive('attributerestriction',function(){
return {
    restrict:'A',
    controller:'MainController',
    link:function(scope,element,attrs) {
      element.bind('mouseenter',function(){
        element[0].innerHTML="<b>Inside the attribute element</b>";
      });
      element.bind('mouseleave',function(){
        element[0].innerHTML="<b>Outside the attribute element</b>";
      });
    }
}
})

.directive('classrestriction',function(){
return {
    restrict:'C',
    controller:'MainController',
    link:function(scope,element,attrs) {
      element.bind('mouseenter',function(){
        element[0].innerHTML="<b>Inside the class element</b>";
      });
      element.bind('mouseleave',function(){
        element[0].innerHTML="<b>Outside the class element</b>";
      });
    }
}
})

.directive('commentrestriction',function(){
return {
    restrict:'M',
    controller:'MainController',
    link:function(scope,element,attrs) {
   alert("This is a comment");
    }
}
});
    </script>
</head>

<body ng-controller="MainController">
    <elementrestriction>Element</elementrestriction>
    <div attributerestriction>{{data}}</div>
    <div class="classrestriction">{{data}}</div>
    <div id="commentsection">
      Comment Section
    
    </div>
</body>
</html>

One step ahead

Sunday 25 January 2015

Binding element with event listener in custom directive - AngularJS

No comments:

Total Pageviews