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

Question

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

该组件需要将时间放置在只读输入元素中，其中每天，每周，每月，每年在显示时间两侧的两个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将运行几天和几个星期，浏览器将在制造车间应用程序的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); 
     }); 

     } 
    }; 
    } 
]); 

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