Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html ng-app="docsTimeDirective">
  <head>
    <script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl2">
      Date format: <input ng-model="format"> <hr/>
      Current time is: <span my-current-time="format"></span>        
    </div>
  
  </body>
</html>
 
angular.module('docsTimeDirective', [])
  .controller('Ctrl2', 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();
      });
 
      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
    };
  });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
MikeCheelpro
0viewers