在AngularJS实时更新 [英] Realtime Updates in AngularJS
问题描述
在试图学习角＆放大器; codeigniter我已经扩展了最初的新教程（从CI）。在它的当前阶段，它会自动显示新的职位和放大器;将删除页面和放大器删帖;当然，更新模型/ DB。 - 我想我不会对这样做AngularJS最有效的方式，但。在我的code反馈将是有益的那个 -
In an attempt to learn Angular & Codeigniter I have expanded the initial new tutorial (from CI). In it's current stage, it automatically displays new posts & removes deleted posts from the page & of course updates model/DB. -- I assume I'm not doing this the most effective way for AngularJS though. Feedback on my code would be helpful for that. --
不过，我最关心的就是的怎么办差分更新的角度？的
当我通过jQuery的做到了这一点，我只是附加一个时间戳我的AJAX网址。然后我会抢在控制器和放大器，时间;它分配给一个变量＆安培;做一个比较，以拉的任何其他职位。它的工作太棒了。它只会拉新的故事（如果存在的话），如果他们不存在，那么就不会有太大的开销。
However, my main concern is how to do differential updates in Angular? When I accomplished this via jQuery, I simply appended a timestamp to my ajax url. Then I would grab that time in the controller & assign it to a variable & do a comparison to pull any additional posts. It worked great. It would only pull new stories (if they exist), if they didn't exist then there wouldn't be much overhead.
然而，目前在棱角分明，它拉动了整个JSON数据与每个请求（每5秒） - 大规模应用，这会消耗过多的带宽。我怎样才能区分，只有拉新职位？
However, currently in Angular, it's pulling the entire JSON data with every request (every 5 seconds) - for large scale apps, this will consume excessive bandwidth. How can I differentiate that and only pull new posts?
controllers.js（角控制器）
var timestamp = '';
function NewsListCtrl($scope, $http, $timeout) {
$scope.newsRequest = function(){
$http.get('/ci/index.php/news/get_news_ajax/' + timestamp).success(function(data) {
timestamp = $.now();
$scope.news = data;
});
};
$scope.newsRequest();
setInterval(function(){
$scope.$apply(function(){
$scope.newsRequest();
});
}, 5000);
}
以上code顺利通过一次进入URL的第3段（第3根据codeigniter）。当页面加载最初，所有的帖子出现。 newsRequest（）再次闪光在此之后，我得到一个空白页。我认为，因为没有任何新的职位，它的空数组到我的$ scope.news分配。 我将如何解决这个问题，这样较新的帖子被追加？
（就像我说的，我想我不会趁着AngularJS NG-重复发挥到淋漓尽致。如果有人有更好的解决方案，请赐教！）
(And like I said, I assume I'm not taking advantage of AngularJS ng-repeat to the fullest. If someone has a better solution, please enlighten me!)
推荐答案
我最终得到的东西的工作，我需要他们的方式。有我的逻辑的巨大的缺陷。在我的code以上，我一直试图在当前时间的 $。现在（）的，但为了具有有效的逻辑，我需要在最后发表的帖子的时候传递给通过。这样，如果有已被我拉到了最后一个后创建的任何帖子中，我能比的。
I ended up getting things to work the way I needed them to. There was a huge flaw in my logic. In my code above, I kept trying to pass in the current time $.now(), but in order to have valid logic, I needed to pass in the time of the last post. That way I can compare if there are any posts that had been created after the last one that I had pulled.
var timestamp = '';
function NewsListCtrl($scope, $http, $timeout) {
$scope.news = [];
$scope.newsRequest = function(){
$http.get('/ci/index.php/news/get_news_ajax/' + timestamp).success(function(data) {
$scope.news = data.recent.concat($scope.news);
if (data.recent[0] != null){
timestamp = data.recent[0].time;
}
});
};
$scope.newsRequest();
setInterval(function(){
$scope.$apply(function(){
$scope.newsRequest();
});
}, 5000);
另外一个大问题是，我的数据中的对象，我有内部的数组。所以，我需要得到该阵列中访问的事情。我曾在我看来，这一点多少补偿，但是这仅仅是一个有点草率。它更干净，让我的角度控制器处理。
Another big issue was that within my data object, I had an array inside. So I needed to be accessing things within that array. I had had somewhat compensated for it in my view, but that was just a bit sloppy. It's much more clean to let my Angular Controller handle it.
有得指出的是这行code的：
Something to point out is this line of code:
$scope.news = data.recent.concat($scope.news);
先得到它的工作后，我最初concating的 data.recent 的到的 $ scope.news 的年底。但这样做这样会显示新项目视图的结束 - 而不是在顶部。这是一个简单的解决方法来获得有它追加到顶部的 $ scope.news 的CONCAT到我的新的对象/数组。
After first getting it working, I was initially concating data.recent to the end of $scope.news. But doing it like this would display the new item to the end of the view - rather than at the top. It was a simple fix to get it to append to the top by having $scope.news concat to my new object/array.
这篇关于在AngularJS实时更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
