JSFiddle - React, Tailwind, and code Playground

by Shidhin C R

HTML

<div ng-app="app">
    <div ng-controller="MainCtrl">
    Date format: <input ng-model="format" /> <hr/>
      Current time is: <span my-current-time="format"></span>
    </div>
</div>

CSS

.dir-child {
    color: red;
}

JavaScript

angular.module('app', [])
  .controller('MainCtrl', function($scope) {
    $scope.format = 'M/d/yy h:mm:ss a';
  })
  .directive('myCurrentTime', function($interval, dateFilter) {
 
    function link(scope, element, attrs) {
      var format,
          timeoutId;
 
      function updateTime() {
        element.text(dateFilter(new Date(), format));
      }
 
      /*scope.$watch(attrs.myCurrentTime, function(value) {
        format = value;
        updateTime();
      });*/
        attrs.$observe('myCurrentTime',function(value){
            format = value;
            updateTime();
        });
 
      element.on('$destroy', function() {
        $interval.cancel(timeoutId);
      });
      // start the UI update process; save the timeoutId for canceling
      timeoutId = $interval(function() {
        updateTime(); // update DOM
      }, 1000);
    }
    return {
      link: link
    };
  });