Как использовать выражение, основанное на времени?

Question

У меня есть кнопка в моем приложении, я только хочу, чтобы она была видна ночью.

Javascript код:

$scope.isNight = function() { 
    var now = new Date(); 
    return now.getHours() < 6 || now.getHours() > 22; 
}; 

И HTML:

<button ng-show="isNight()">Visible at night</button> 

Как я могу сделать выражение перепроверены, когда это необходимо? Или есть лучший подход к выражениям в зависимости от времени?

Answer 1

Возможно, что-то вроде этого?

var checkForNight = function() { 
    var now = new Date(); 
    if (now.getHours() < 6 || now.getHours() > 22) { 
    // It's night! Show your button! 
    return true; 
    } 

    return false; 
}; 

if (!checkForNight()) { 
    var checkForNightIntervalID = setInterval(function() { 
    if (checkForNight()) { 
     clearInterval(checkForNightIntervalID); 
    } 
    }, 60000 /* check once per minute */); 
} 

Edit для большей ясности.

Answer 2

Я предполагаю, что часть «когда это необходимо» означает «при изменении области».

Поэтому я предлагаю использовать фильтр как так:

HTML

<button ng-show="someDate | isNight">Visible at night</button> 

или

<button ng-show="someDate | isNight:19:5">Visible at night</button> 

Javascript

angular.module('yourApp', []) 
.filter('isNight', IsNightFilter); 

IsNightFilter.$inject = ['$filter']; 

function IsNightFilter($filter) { 
    return function (now, startNight, endNight) { 
     if (now) { 
      if (typeof now.getMonth !== 'function') { 
       now = new Date(now); 
      } 

      var hours = now.getHours(); 

      startNight = startNight || 22; 
      endNight = endNight || 6; 

      if (hours < endNight || hours > startNight) { 
       return true; 
      } 
     } 

     return false; 
    }; 
} 

Answer 3

Вы можете использовать интервал (желательно внутри директивы), чтобы проверить время и установить видимость, но вы также можете использовать фильтр, который оценивается в каждом цикле дайджест.

app.directive('hideMeAtNight', function($interval) { 
    return { 
    restrict: "A", 
    link: function(scope, element, attributes) { 
     $interval(function() { 
     var now = new Date(); 
     element.toggleClass('ng-hide', now.getHours() < 6 || now.getHours() > 22); 
     }, 1000) 
    } 
    }; 
}); 

app.filter('nightFilter', function() { 
    return function() { 
    var now = new Date(); 
    return now.getHours() < 6 || now.getHours() > 22; 
    } 
}); 

И вы можете использовать их не любят:

<button hide-me-at-night>This is a button</button> 
<button ng-hide="true|nightFilter">This is a button</button> 

продемонстрированная на plnkr http://plnkr.co/edit/tjAVWf