AngularJS: Aktualisieren eine Funktion in Realtime

Question

ich in einem Controller haben:

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

Und in einer Ansicht:

{{timeAgoCreation(order)}} 

es den richtigen Wert zurück: vor 9 Minuten. Dieser Wert wird jedoch nicht in Echtzeit aktualisiert. Ich muss die Seite aktualisieren.

Ist es möglich, es in Echtzeit zu aktualisieren?

Answer 1

Werfen Sie einen Blick auf dieses Beispiel in Fiddle

Es zeigt deutlich das aktuelle Datum Form mit Update jede Sekunde.

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

Sie benötigen eine Art Timer, um die Funktion regelmäßig aufzurufen.

Wenn Sie etwas Bestimmtes für AngularJS suchen, sollten Sie sich vielleicht angular-timer ansehen.

Sie könnten auch das tickende Uhrbeispiel here ansehen und Ihren momentjs-Code ersetzen, anstatt nur das Datum und die Uhrzeit anzuzeigen.

Answer 3

Fügen Sie einfach diese Funktion in der Steuerung (vergessen Sie nicht, $timeout Service zu injizieren):

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

$timeout feuert automatisch Zyklus nach Funktion verdauen als erster Parameter übergeben wird so genannt, der Wert in Sicht sollte jede Sekunde aktualisiert werden.

Dort haben Sie arbeiten jsFiddle.

Answer 4

Ich war gerade nach einer Möglichkeit, die gleiche Sache mit Moment.js und the angular-moment module von urish gefunden zu tun.

Es hat individuelle Angular Richtlinien so der gesamte Code Sie benötigen ein Attribut ex ist:

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