JSFiddle - React, Tailwind, and code Playground

by nirus

HTML

<body ng-app="myApp" ng-controller="myCtrl"> 
    <celebrity></celebrity> 
    <celebrity></celebrity> 
    <celebrity></celebrity> 
  <button onclick = "scopeManipulation()">Manipulate</button>
</body>

JavaScript

//defining module
var app = angular.module('myApp',[]);

//defning Controller
app.controller('myCtrl',function($scope){
  $scope.name = "Brad Pitt";
});

//defining directive
app.directive('celebrity',function(){
  return{
    restrict: 'E',
    scope: true, 
    template: '<div>{{name}}</div>'
  };
});

//Here lets illustrate the scope by accessing/manipulating it externally
function scopeManipulation(){
  var access = angular.element(document.getElementsByTagName("body")); //Parent scope 
  var eScope = access.scope();

  eScope.$apply(function(){
    eScope.name = "I am changed"; //Childrens also inherit the same
  });  
  
  
};