AngularJS: अद्यतन RealTime

Question

में एक समारोह मैं एक नियंत्रक में है:

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

और एक दृश्य में: 9 मिनट पहले:

{{timeAgoCreation(order)}} 

यह सही मान वापस जाएँ। लेकिन यह मान रीयलटाइम में अपडेट नहीं है। मुझे पेज रीफ्रेश करना है।

क्या यह रीयलटाइम अपडेट करना संभव है?

Answer 1

यह स्पष्ट रूप से अद्यतन प्रत्येक दूसरे के साथ आज की तारीख रूप को दर्शाता है Fiddle

में इस उदाहरण पर एक नजर डालें।

जे एस

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. 
} 
}); 

एचटीएमएल

<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

आपको समय-समय पर फ़ंक्शन को कॉल करने के लिए किसी प्रकार का टाइमर चाहिए।

यदि आप AngularJS के लिए कुछ विशिष्ट खोज रहे हैं, तो आप angular-timer पर एक नज़र डालना चाहेंगे।

आप टिकिंग घड़ी उदाहरण here पर भी देख सकते हैं और केवल दिनांक और समय दिखाने के बजाय अपने पलज कोड को प्रतिस्थापित कर सकते हैं।

Answer 3

बस नियंत्रक करने के लिए इस समारोह को जोड़ने (मत भूलना $timeout सेवा सुई):

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

$timeout स्वचालित रूप से पहले पैरामीटर के रूप में पारित किया गया समारोह के बाद चक्र को पचाने आग कहा जाता है तो ध्यान में रखते हुए मूल्य चाहिए हर सेकेंड को अपडेट किया जाए।

वहां आप jsFiddle काम कर रहे हैं।

Answer 4

मैं सिर्फ एक ही बात Moment.js का उपयोग कर के लिए एक रास्ता तलाश कर रहे थे और urish द्वारा the angular-moment module पाया।

इसलिए सभी कोड की जरूरत है एक विशेषता पूर्व है यह कस्टम कोणीय निर्देशों है:

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