Please note, this is a STATIC archive of website www.tutorialspoint.com from 11 May 2019, cach3.com does not collect or store any user information, there is no "phishing" involved.
Tutorialspoint
Home
Q/A
Tools
Coding Ground
Current Affairs
UPSC Notes
Online Tutors
Code Examples
Whiteboard
Net Meeting
Articles
Library
Videos
eBooks

Angularjs CUSTOM Directive And NG-Transclude And Handling Event Example

angularjs 

<!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>

Expression Init Eval Demo

angularjs 

<!doctype html>
<html ng-app="ExpressionDemoApp">
  <head>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>

  </head>
  <body>
    <div ng-controller="ExpressionController" ng-init="person={firstname:'Ashish' ,lastname:'Sahu'}">
        Addition: {{addition}}<br>
        First Name : {{person.firstname}} <br>
        Last Name  : {{person.lastname}}
    </div>
    <script>
        var app=angular.module("ExpressionDemoApp",[]);
        app.controller("ExpressionController",function($scope){
            $scope.a=5;
            $scope.b=10;
            $scope.addition=$scope.$eval('a+b');
        });
        
    </script>
  </body>
</html>

ex1

angularjs 

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

1edafa

angularjs 

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

Online AngularJS Editor

angularjs 

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
       <input type="text" ng-model="yourName1" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

Example_n-g_Repeater

angularjs 

<!doctype html>
<html ng-app = "ng_Repeater_App">
   
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
   </head>
   
   <body>
      
      <div ng-controller="ng_Repeater_Controller">
         <h1>Topics</h1>
          <ul>
              <li ng-repeat="tpname in Topicnames">
                  {{ tpname.name }}
              </li>
          </ul>
      </div>
      <script>
          var app = angular.module('ng_Repeater_App',[]);
          app.controller('ng_Repeater_Controller',function($scope){
              $scope.Topicnames = [
                  {name:"What controller do from Angular's perspective"},
                  {name:"Controller Methods"},
                  {name:"Building a basic controller"}
                  ];
          });
          
      </script>
      
   </body>
</html>

Online AngularJS Editor

angularjs 

Unable to open file!