AngularJS Custom Directives example – Angular Directives

AngularJS Custom Directives example – Angular Directives

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

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

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 :  Creating Dynamic Graphs and Charts using Vuejs