AngularJs显示当前时间

最新推荐文章于 2021-06-05 06:54:33 发布

转载最新推荐文章于 2021-06-05 06:54:33 发布 · 1.6w 阅读

前端同时被 2 个专栏收录

8 篇文章

订阅专栏

摘抄

3 篇文章

订阅专栏

本文介绍如何使用AngularJS和Directive3来创建一个动态显示当前时间的网页应用，通过注册自定义指令来实现实时更新时间的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

testdrective3.html

<span style="font-size:14px;"><!DOCTYPE html>
<html ng-app="time">
  <head>
    <script src="../js/angular.js"></script>
    <script src="directive3.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></span>

directive3.js

<span style="font-size:14px;">var time = angular.module('time', [])
  // Register the 'myCurrentTime' directive factory method.
  // We inject $timeout and dateFilter service since the factory method is DI.
  .directive('myCurrentTime', function($timeout, dateFilter) {
    // return the directive link function. (compile function not needed)
    return function(scope, element, attrs) {
      var format,  // date format
          timeoutId; // timeoutId, so that we can cancel the time updates

      // used to update the UI
      function updateTime() {
        element.text(dateFilter(new Date(), format));
      }

      // watch the expression, and update the UI on change.
      scope.$watch(attrs.myCurrentTime, function(value) {
        format = value;
        updateTime();
      });

      // schedule update in one second
      function updateLater() {
        // save the timeoutId for canceling
        timeoutId = $timeout(function() {
          updateTime(); // update DOM
          updateLater(); // schedule another update
        }, 1000);
      }

      // listen on DOM destroy (removal) event, and cancel the next UI update
      // to prevent updating time ofter the DOM element was removed.
      element.bind('$destroy', function() {
        $timeout.cancel(timeoutId);
      });

      updateLater(); // kick off the UI update process.
    }
  });

time.controller('Ctrl2',function($scope){
	$scope.format = 'yyyy-MM-dd h:mm:ss';
});</span>