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,
-comment
-CSS class

Angular Directives : Defining a Directive

script.js

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

Now, define a directive.

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

HTML 

<body ng-app=infinityknow>
    <my-directive></my-directive>
</body>

custom directive in angularjs With Example

<html>
   <head>
      <title>AngularJS Custom Directives example - Angular Directives</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "infinityknow" ng-controller = "livectrl">
         <weblist name = "live24u"></weblist><br/>
         <weblist name = "tutorial"></weblist>
      </div>
		
      <script src = "angular.min.js"></script>
      
      <script>
         var infinityknow = angular.module("infinityknow", []);
         
         infinityknow.directive('weblist', function() {
            var directive = {};
            directive.restrict = 'E';
            directive.template = "weblist: <b>{{weblist.name}}</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>"+$scope.weblist.name +"</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 = {};
            $scope.live24u.name = "live24u websitename";
            $scope.live24u.rankno  = 1;

            $scope.tutorial = {};
            $scope.tutorial.name = "tutorial websitename";
            $scope.tutorial.rankno  = 2;
         });
			
      </script>
      
   </body>
</html>

Example

READ :  Vuejs Implementing Routes And Multiple Views Example
Post Views: 1,122