JSFiddle - React, Tailwind, and code Playground

by Bahman ParsaManesh

HTML

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
    	// the application module
angular.module('myApp', [])

// a simple directive defining a linking function
.directive('myDirective', function(){
  
  return {
    scope: { options: '='},
    link: function(scope, element){
      angular.extend(scope.options, {
        directiveFunction: function(){
          console.log(element[0].getElementsByClassName('myClass'));
        }
      });
    }
  };
  
})

// the controller passes an options object to the directive.
// Then in the directive's controller that object is extended to provide
// "public" function
.controller('MainCtrl', function($scope){
  
  $scope.dirOptions = {};
  $scope.callDirFunc = function(){
    $scope.dirOptions.directiveFunction();
  };
  
});
    </script>
  </head>

  <body ng-controller="MainCtrl">
    <my-directive options="dirOptions">
      <div class="fdgdfgfd">
        <div class="fdgdfgfd">
          <div class="fdgdfgfd">
            <p class="myClass"></p>
          </div>
        </div>
      </div>
    </my-directive>
    <br>
    <button ng-click="callDirFunc()">Call directive function</button>
  </body>

</html>