JSFiddle - React, Tailwind, and code Playground

by madil1548

HTML

<html ng-app="Adil">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
    <script src="example.js"></script>
  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  </head>
  <body>

<div ng-controller="Demo">
    <button class="btn"  ng-click="showForm=true;focusInput=true">click here</button>
    <div ng-show="showForm">
      <input type="text" focus-me="focusInput">
   <br>
      <button class="btn" ng-click="showForm=false">Click here to save the input field</button>
         <p>
      The black border around the corner shows that the input field is focused
      </p>
    </div>
</div>
  </body>
</html>

JavaScript

var app = angular.module('Adil', []);
var Demo = function ($scope) {
};

app.directive('focusMe', function() {
  return {
    scope: { trigger: '=focusIn' },
    link: function(scope, element) {
      scope.$watch('trigger', function(value) {
        if(value === true) { 

            element[0].focus();
            scope.trigger = false;
          
        }
      });
    }
  };
});