Online AngularJS Editor

Browse more Angularjs Examples
<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    
    <script>
        var app = angular.module('testApp', []);
        app.controller('CtrlOne', ['$scope','studentSrvc', 'myDirective', function($scope, studentSrvc, myDirective){
            $scope.students = studentSrvc.all();
        }])
        app.controller('CtrlTwo', ['$scope','studentSrvc', function($scope, studentSrvc){
            $scope.students = studentSrvc.all();
        }])
        
        app.service('studentSrvc', function(){
            this.all = function (){
               return ["Tanveer", "Ehtesham", "Irfan"];
            }
        })
        
        app.directive('myDirective', function(){
            return {
              compile: function(tElem, tAttrs){
                console.log('compile => ' + tElem.html());
                return {
                  pre: function(scope, iElem, iAttrs){
                    alert('pre link => ' + iElem.html());
                  },
                  post: function(scope, iElem, iAttrs){
                    console.log('post link => ' + iElem.html());
                  }
                }
              }
            }
        })
        
        
    </script>
  </head>
  <body ng-app="testApp">
    <div ng-controller="CtrlOne">
      <p ng-repeat="s in students">{{s}}</p>
      <div myDirective></myDirective>
      <hr>
    </div>
    <div ng-controller="CtrlTwo">
      <h4 ng-repeat="s in students">{{s}}</h4>
    </div>
  </body>
</html>
Online AngularJS Editor

Follow

Newsletter
