JSFiddle - React, Tailwind, and code Playground

by lev milov

HTML

<div ng-app="todoApp" ng-controller="todoController">


  
  <my-border>
 
  </my-border>
  
  
  
</div>

JavaScript

var todoApp = angular.module('todoApp', []);

todoApp.controller('todoController', function($scope) {

  $scope.sortType = 'text'; // значение сортировки по умолчанию
  $scope.sortReverse = false; // обратная сортривка
  $scope.searchWords = ''; // значение поиска по умолчанию

  $scope.tasks = [];
  $scope.format = 'M/d/yy h:mm:ss a';
  $scope.add = function() {
    $scope.tasks.push({
      text: $scope.title,
      data: new Date().getTime(),
      edit: false
    });
  }
  $scope.delete = function(removedTask) {
    $scope.tasks = $scope.tasks.filter(function(task) {
    	return task !== removedTask;
    })
  }
  $scope.change = function(task) {
    task.edit = true;
  }
});



todoApp.// Регистрируем фабричный метод для директивы 'myCurrentTime'.
  // Внедряем $timeout и сервис dateFilter пока фабричный метод DI.
  directive('myCurrentTime', function($timeout, dateFilter) {
    // возвращаем функцию линковки директивы. (компилировать функцию не нужно)
    return function(scope, element, attrs) {
      var format,  // формат даты
          timeoutId; // timeoutId, так что мы можем останавливать обновление времени
 
      // используя обновление UI
      function updateTime() {
        element.text(dateFilter(new Date(), format));
      }
 
      // проверка выражения и обновление UI при изменении.
      scope.$watch(attrs.myCurrentTime, function(value) {
        format = value;
        updateTime();
      });
 
      // расписание обновлений за секунду
      function updateLater() {
        // сохраняем timeoutId для отмены
        timeoutId = $timeout(function() {
          updateTime(); // обновляем DOM
          updateLater(); // расписание других обновлений
        }, 1000);
      }
 
      // прослушиваем разрушающее (removal) DOM событие, и отменяем следующее обновление UI
      // для предотвращения обновления времени после того как DOM-элемент был удален.
      element.bind('$destroy', function() {
        $timeout.cancel(timeoutId);
      });
 
     ...