2

为了学习 Angular 和 Codeigniter，我扩展了最初的新教程（来自 CI）。在当前阶段，它会自动显示新帖子并从页面中删除已删除的帖子，当然还会更新模型/数据库。——我认为我这样做并不是对 AngularJS 最有效的方法。对我的代码的反馈将对此有所帮助。--

但是，我主要关心的是如何在 Angular 中进行差异更新？ 当我通过 jQuery 完成此操作时，我只是在我的 ajax url 上附加了一个时间戳。然后我会在控制器中抓住那个时间并将其分配给一个变量并进行比较以提取任何其他帖子。效果很好。它只会拉新故事（如果它们存在），如果它们不存在，那么不会有太多开销。

然而，目前在 Angular 中，它会在每个请求（每 5 秒）中提取整个 JSON 数据——对于大型应用程序，这将消耗过多的带宽。我如何区分这一点并只拉新帖子？

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

}

上面的代码成功地将时间传递到 URL 的第 3 段（根据 Codeigniter 的第 3 段）。当页面最初加载时，所有帖子都会出现。然后在 newsRequest() 再次触发后，我得到一个空白页。我假设因为没有任何更新的帖子，它会将空数组分配给我的 $scope.news。我将如何解决这个问题以便附加较新的帖子？

（就像我说的，我假设我没有充分利用 AngularJS ng-repeat。如果有人有更好的解决方案，请赐教！）

4

2 回答 2

1

您需要将加载的数据连接到 $scope.news。如果它是一个数组 - 容易

 $scope.news.concat(data);

否则，您可能需要遍历加载的数据并添加新位。

于 2013-03-15T20:59:27.130 回答
1

我最终让事情按照我需要的方式工作。我的逻辑有一个很大的缺陷。在上面的代码中，我一直在尝试传入当前时间$.now()，但为了获得有效的逻辑，我需要传入上一篇文章的时间。这样我就可以比较在我拉的最后一个帖子之后是否有任何帖子。

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

另一个大问题是在我的数据对象中，我有一个数组。所以我需要访问那个数组中的东西。在我看来，我已经对它进行了一些补偿，但这只是有点草率。让我的 Angular 控制器处理它更干净。

需要指出的是这行代码：

$scope.news = data.recent.concat($scope.news);

在第一次让它工作之后，我最初将 data.recent连接到$scope.news的末尾。但是这样做会将新项目显示到视图的末尾 - 而不是在顶部。通过将$scope.news连接到我的新对象/数组来使其附加到顶部是一个简单的修复。

于 2013-03-19T20:17:37.280 回答