javascript AngularJS：实时更新函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17641278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS : Update A Function In RealTime
提问by Alex
I have in a controller:
我有一个控制器：
$scope.timeAgoCreation = function(order) {
return moment(order.createdAt).fromNow();
};
And in a view:
并且在一个视图中：
{{timeAgoCreation(order)}}
It return the correct value: 9 minutes ago. But this value is not updated in realtime. I have to refresh the page.
它返回正确的值：9 分钟前。但是这个值不是实时更新的。我必须刷新页面。
Is it possible to make it update realtime ?
可以实时更新吗？
采纳答案by Maxim Shoustin
Take a look on this example in Fiddle
看一下Fiddle 中的这个例子
It clearly demonstrates current date form with update each second.
它清楚地展示了当前日期格式，每秒更新一次。
JS
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
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>
回答by PrimosK
Just add this function in to the controller (don't forget to inject $timeoutservice):
只需将此功能添加到控制器中（不要忘记注入$timeout服务）：
function fireDigestEverySecond() {
$timeout(fireDigestEverySecond , 1000);
};
fireDigestEverySecond();
$timeoutautomatically fires digest cycle after function passed in as first parameter is called so the value in view should be updated every second.
$timeout在调用第一个参数时传入的函数后自动触发摘要循环，因此视图中的值应每秒更新一次。
There you have working jsFiddle.
在那里你有工作jsFiddle。
回答by Matt Johnson-Pint
You'll need some kind of timer to call the function periodically.
您将需要某种计时器来定期调用该函数。
If you're looking for something specific to AngularJS, you might want to take a look at angular-timer.
如果您正在寻找特定于 AngularJS 的东西，您可能想看看angular-timer。
You could also look at the ticking clock example hereand substitute your momentjs code instead of just showing the date and time.
您还可以在此处查看滴答时钟示例并替换您的 momentjs 代码，而不仅仅是显示日期和时间。
回答by cantrellnm
I was just looking for a way to do the same thing using Moment.js and found the angular-moment moduleby urish.
我只是在寻找一种使用 Moment.js 做同样事情的方法，并通过 urish 找到了 angular-moment 模块。
It has custom Angular directives so all the code you need is an attribute ex:
它具有自定义 Angular 指令，因此您需要的所有代码都是一个属性，例如：
<span am-time-ago="message.time"></span>
