Question

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

组件需要将时间放在一个只读输入元素中，日，周，月，年分为显示时间任一侧的2个跨度元素。

到目前为止，我刚刚输出了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将持续运行数天和数周，浏览器将处于kiosk模式，用于制造车间应用程序。我唯一的观点是日，月，年也需要充满活力。

Answer 1

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);
      });

      }
    };
  }
]);

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

扩展时钟组件的Angular Directive以分别显示datetime元素

1 个答案: