Angularjs CUSTOM Directive And NG-Transclude And Handling Event Example

Browse more Angularjs Examples
<!doctype html>
<html ng-app="CustomDirectiveApp">
  <head>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

  </head>
  <body ng-controller="CustomDirectiveController">
    <div ng-guru="">   </div><br>
    <div ng-guru1=""> </div>
    <div>
        <pane title="{{title}}"> Demo NG-Transclude </pane>
    </div>
    <div>
        <outer></outer>
    </div>
    <div ng-guru2="">Click Me</div>
    <script type="text/javascript">
        var app=angular.module("CustomDirectiveApp",[]);
        
        app.controller("CustomDirectiveController",function(){
           this.tutorialname = "Angular JS Custom Directive Demo..";
        });
        
        app.directive("ngGuru",function(){
            return {
                controller : 'CustomDirectiveController',
                controllerAs :'ctr' ,
                template :'{{ctr.tutorialname}}'
                };
            
        });
        
        app.directive("ngGuru1",function(){
            return {
                template :'Name: <input type="text"/> <br><br> Age:<input type="Number">'
            };
        });
        app.directive("pane",function(){
            return{
                transclude : true,
                scope : {title :'@'},
                template:   '<br><div style="border: 1px solid black;">'+
                            '<ng-transclude></ng-transclude>'+
                            '</div>'
                };
        });
        app.directive("outer",function(){
            return{
                restrict : 'E',
                template:'<div><h1>Outer</h1><inner></inner></div>',
            };
        });
        app.directive("inner",function(){
            return{
                restrict:'E',
                template:'<div><h1>Inner</h1></div>',
            };
        });
       app.directive('ngGuru2',function(){
        return {

            link:function($scope,element,attrs) {
                element.bind('click',function () {
                    element.html('You clicked me');
                });}
        }});
      </script>
  </body>
</html>
Angularjs CUSTOM Directive And NG-Transclude And Handling Event Example

Follow

Newsletter
