扩展时钟组件的角度指令以单独显示日期时间元素

Extend an Angular Directive for a clock component to separately display datetime elements

本文关键字：显示 单独 日期 时间 元素 指令 组件 时钟 扩展      更新时间：2023-09-26

我想知道如何最好地创建封装时钟组件的角度指令。

组件需要将时间放置在只读输入元素中，在显示时间两侧的两个跨度元素之间划分天、周、月、年。

到目前为止，我只得到了针对1个html元素的时钟输出。

我一直在Angular文档中的示例基础上构建（请参阅https://docs.angularjs.org/guide/directive"创建一个操作DOM的指令"），但由于不需要动态格式选项，因此删除了该选项，并使用momentjs根据自己的喜好应用静态日期格式。

(function() {
  "use strict";
  var app = angular
    .module('labourRecordingApp')
    .directive('entryFormClock', ['$interval',
      function($interval) {
        return function(scope, element, attrs) {
          var stopTime;
          function updateTime() {
            var now = moment();
            var nowClockDate = moment(now).format("dddd, MMMM Do YYYY");
            var nowClockTime = moment(now).format("HH:mm:ss");
            var nowClockWeek = "Week " + moment(now).format("W.E");
            element.text(nowClockDate + " " + nowClockTime + " " + nowClockWeek);
          }
          stopTime = $interval(updateTime, 1000);
          element.on('$destroy', function() {
            $interval.cancel(stopTime);
          });
        }
      }
    ]);
}());
<span entry-form-clock></span>

所以我需要一些标记，如下所示，但我不确定Angular方面。

<span>day month</span>
<input type="text" readonly="true" value="timeonly" />
<span>year week.day</span>

我认为这最好在模板html中实现，但需要一些操作帮助。

除此之外，这个SPA将连续运行数天和数周，浏览器将处于生产车间应用程序的信息亭模式。我在这里唯一的观点是，天、月、年也需要有活力。

app
.directive('entryFormClock', ['$interval',
  function($interval) {
    return {
      template: '<div>{{yymmdd}}<input type="text" value="{{min}}"></div>',
      replace: true,
      link: function(scope, element) {
        var stopTime;
      function updateTime() {
        var d = new Date();
        scope.yymmdd = [d.getMonth()+1,
           d.getDate(),
           d.getFullYear()].join('/');
        scope.min = [d.getHours(),
           d.getMinutes(),
           d.getSeconds()].join(':');
      }
      stopTime = $interval(updateTime, 1000);
      element.on('$destroy', function() {
        $interval.cancel(stopTime);
      });
      }
    };
  }
]);

它显示了两个独立的子项，相应地更新您的代码。

相关文章：