angularjs: Aktualizacja funkcji w czasie rzeczywistym

Question

mam w kontrolerze:

$scope.timeAgoCreation = function(order) { 
    return moment(order.createdAt).fromNow(); 
}; 

A w widoku:

{{timeAgoCreation(order)}} 

zwróci poprawną wartość: 9 minut temu. Ale ta wartość nie jest aktualizowana w czasie rzeczywistym. Muszę odświeżyć stronę.

Czy można aktualizować w czasie rzeczywistym?

Answer 1

Spójrz na ten przykład w Fiddle

To wyraźnie pokazuje aktualną datę z formularza aktualizacji każdy drugi.

JS

function Ctrl2($scope,$timeout) { 
$scope.format = 'M/d/yy h:mm:ss a'; 

} 

angular.module('time', []) 
// Register the 'myCurrentTime' directive factory method. 
// We inject $timeout and dateFilter service since the factory method is DI. 
.directive('myCurrentTime', function($timeout, dateFilter) { 
    // return the directive link function. (compile function not needed) 
    return function(scope, element, attrs) { 
    var format, // date format 
     timeoutId; // timeoutId, so that we can cancel the time updates 

    // used to update the UI 
    function updateTime() { 
    element.text(dateFilter(new Date(), format)); 
    } 

    // watch the expression, and update the UI on change. 
    scope.$watch(attrs.myCurrentTime, function(value) { 
    format = value; 
    updateTime(); 
    }); 

    // schedule update in one second 
    function updateLater() { 
    // save the timeoutId for canceling 
    timeoutId = $timeout(function() { 
     updateTime(); // update DOM 
     updateLater(); // schedule another update 
    }, 1000); 
    } 

    // listen on DOM destroy (removal) event, and cancel the next UI update 
    // to prevent updating time ofter the DOM element was removed. 
    element.bind('$destroy', function() { 
    $timeout.cancel(timeoutId); 
    }); 

    updateLater(); // kick off the UI update process. 
} 
}); 

HTML

<div ng-app="time"> 
    <div ng-controller="Ctrl2"> 
    Date format: <input ng-model="format"> <hr/> 
    Current time is: <span my-current-time="format"></span>  
    </div> 
</div> 

Answer 2

Potrzebny jest jakiś zegar do wywołania funkcji okresowo.

Jeśli szukasz czegoś konkretnego dla AngularJS, możesz rzucić okiem na angular-timer.

Można również spojrzeć na przykład tykającego zegara here i zastąpić kod instantjs zamiast wyświetlać tylko datę i godzinę.

Answer 3

Wystarczy dodać tę funkcję do sterownika (nie zapomnij, aby wstrzyknąć $timeout usługę):

function fireDigestEverySecond() { 
    $timeout(fireDigestEverySecond , 1000); 
}; 
fireDigestEverySecond(); 

$timeout automatycznie pożary trawią cykl po funkcji przekazany jako pierwszy parametr nazywany jest więc wartość w widoku powinny być aktualizowane co sekundę.

Tam pracujesz jsFiddle.

Answer 4

właśnie szuka sposobu, aby zrobić to samo przy użyciu Moment.js i znalazł the angular-moment module przez urish.

Ma dyrektyw zwyczaj kątowe więc cały kod trzeba to ex atrybut:

<span am-time-ago="message.time"></span>