Расширьте угловую директиву для компонента часов, чтобы отдельно отображать элементы даты и времени

Question

Расширьте угловую директиву для компонента часов, чтобы отдельно отображать элементы даты и времени

0

Я хочу знать, как лучше всего создать угловую директиву, которая инкапсулирует компонент часов.

Компонент должен иметь время, размещенное внутри элемента ввода только для чтения, с разделом дня, недели, месяца, года между двумя элементами span с каждой стороны отображаемого времени.

До сих пор я получил только часы с 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>

Поэтому мне нужна следующая разметка, но я не уверен в угловой стороне.

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

Я предполагаю, что это лучше всего реализовать в шаблоне html, но для этого вам нужна какая-то помощь.

Кроме того, этот SPA будет работать в течение нескольких дней и дней подряд, и браузер будет находиться в режиме киоска для приложения производственного цеха. Мой единственный момент здесь - день, месяц, год, также должны быть динамичными.

mikepoole72 04 нояб. 2015, в 12:00

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Partha Sarathi Ghosh · Accepted Answer · 2015-11-04T09-24-00.000Z

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

      }
    };
  }
]);

Он показывает два отдельных ребенка, обновите свой код соответственно.

Я не проверял конкретную манипуляцию с датой, но аспект шаблона работает для меня и пометил как ответ на этом основании - ура.