Angular.js -如何在实时套接字嵌套的ng-repeat中使limitTo动态且持久.IO数据更新

Question

所以我有一个应用程序，正在使用套接字实时更新数据。用Angular JS来显示它。

我让它在多个ng-repeat中显示数据(注释)，这些重复使用' track by '来确保在引入最新数据时忽略重复项。我还使用LimitTo来一次只显示一定数量的评论，LimitTo是动态的，当用户单击按钮时增加。

HTML

<div ng-controller="CommentsController" >
<!-- Comment Repeater Starts Here -->
<div ng-repeat="comment in comments | limitTo: limit track by comment.id" >
    {{ comment.comment }}
    <!-- Nested Reply Comments Start Here -->
    <div ng-repeat="reply in comment.replies | limitTo: comment.limit track by reply.id" >
        <div class="comment-text" >
            {{ reply.comment }}
        </div>
    </div>
    <a href="#" ng-click="increaseReplyLimit(comment, comment.limit)" ng-show="hasMoreComments(comment.replies, comment.limit)" >View More Replies</a>
</div>
<a href="#" ng-click="increaseLimit(limit)" ng-show="hasMoreComments(comments,limit)" >View More Comments</a>

对于我的第一个ng-repeat，它工作得非常好，因为我将LimitTo赋值给作用域中的一个变量，当我通过Socket.io引入新数据时，它不受影响。对于嵌套的ng-repeat，我使用注释。limit作为LimitTo的变量，每次我通过socket。io输入新数据时，它都会被覆盖。(新数据有一个默认的注释。

角

app.controller('CommentsController', function ($scope,socket,$http,$location) {
// fetching the latest comments from the API location
$http.get( $url + 'comments').success(function(comments) {
    if (comments) {  
        $scope.comments = comments;
    }
});
// updating comments via socket.io
socket.on('comment.update', function (data) {
    $scope.comments = JSON.parse(data);
});
$scope.limit = 2;
$scope.hasMoreComments = function(comments, limit) {
    if (typeof comments != "undefined" && comments != "false") {
        var $commentLength = comments.length;
        if ($commentLength > limit) {
            return true;
        } 
        return false;
    }
    return false;   
}
$scope.increaseLimit = function(limit) {
    $scope.limit = $scope.limit + 2;
}
$scope.increaseReplyLimit = function(comment, limit) {
    comment.limit = parseInt(limit) + 2;
}

});

当我从socket.io引入新数据时，我如何防止每个嵌套重复的当前限制被覆盖?

我已经尝试对旧数据和新数据进行深度合并(以更新新数据中的嵌套限制以反映当前嵌套限制的想法)。然而，当我这样做的时候，Angular完全忽略了新的限制，并且不再对嵌套注释强制任何限制。

传入数据的结构

[
{
    "topics": [
        {
        "id": 75,
        "topic": "test",
        "approved": 1,
        "created_at": "-0001-11-30 00:00:00",
        "updated_at": "-0001-11-30 00:00:00",
        "slug": "test",
        "blurb": null
        }
    ],
    "id": 849,
    "user_id": 80,
    "news_id": 9,
    "context": "Test News Article 1",
    "comment": "<p>test comment 4</p>",
    "origin": "Test",
    "origin_url": "http://localhost:8000/news/test-news-article-1",
    "author": "omurphy27",
    "author_url": null,
    "votes": 0,
    "created_at": "2015-06-08 22:36:53",
    "updated_at": "2015-06-08 22:36:53",
    "approved": 1,
    "slug": "test-comment-116",
    "original": 1,
    "parent_id": null,
    "username": "omurphy27",
    "limit": 2,
    "voted": false
}

)

一直在撞我的头在墙上一段时间与这个和任何帮助是非常感激。

Answer 1

我最终为嵌套的回复限制创建了一个单独的数组，并将其附加到作用域(而不是将这些限制放在由套接字引入并实时更新的数据对象中)。io)

查看下面我更新的angular代码

app.controller('CommentsController', function ($scope,socket,$http,$location) {
// fetching the latest comments from the API location
$http.get( $url + 'comments').success(function(comments) {
    if (comments) {  
        $scope.comments = comments;
    }
    // populate my separate array for reply limits
    $scope.populateLimits(comments.length, 4);
});
$scope.populateLimits = function(limitLength, limit) {
    var limits = [];
    for (var i = limitLength - 1; i >= 0; i--) {
        limits[i] = limit;
    };
    $scope.limits = limits;
}
// updating comments via socket.io
socket.on('comment.update', function (data) {
    if (data.length > $scope.comments.length) {
        var difference = data.length - $scope.comments.length; 
        // increment the limits array by however 
        // many new comments are pulled in by socket.io
        $scope.incrementLimits(difference);
    }
    $scope.comments = JSON.parse(data);
});
$scope.incrementLimits = function(difference) {
    var newLimits = $scope.limits;
    for (var i = 0; i < difference; i++) {
        newLimits.unshift(2);
    };
   $scope.limits = newLimits;
}
$scope.limit = 2;
$scope.hasMoreComments = function(comments, limit) {
    if (typeof comments != "undefined" && comments != "false") {
        var $commentLength = comments.length;
        if ($commentLength > limit) {
            return true;
        } 
        return false;
    }
    return false;   
}
$scope.increaseLimit = function(limit) {
    $scope.limit = $scope.limit + 2;
}
$scope.increaseReplyLimit = function(limit,index) {
    $scope.limits[index] = parseInt(limit) + 2;
}
});

我根据我有多少"父"评论来填充这个单独的限制数组，然后我将它增加多少新评论。现在我只是按顺序显示评论，最新的先显示，所以我不需要跟踪哪个"限制"属于哪个评论;我可以简单地将新元素添加到数组的开头。

至于访问$作用域。我在嵌套的ng-repeat中使用limits数组，并使用它作为LimitTo变量，我使用以下变量:limits[$index]。

查看下面更新的标记:

<div ng-controller="CommentsController" >
<!-- Comment Repeater Starts Here -->
<div ng-repeat="comment in comments | limitTo: limit track by comment.id" >
    {{ comment.comment }}
    <!-- Nested Reply Comments Start Here -->
    <div ng-repeat="reply in comment.replies | limitTo: limits[$index] track by reply.id" >
        <div class="comment-text" >
            {{ reply.comment }}
        </div>
    </div>
    <a href="#" ng-click="increaseReplyLimit(limits[$index], $index)" ng-show="hasMoreComments(comment.replies, limits[$index])" >View More Replies</a>
</div>
<a href="#" ng-click="increaseLimit(limit)"    ng-show="hasMoreComments(comments,limit)" >View More Comments</a>
</div>

上面修复了我所遇到的问题，我为嵌套的ng-repeat的limitTo使用的动态变量不断被覆盖。我确实需要$scope。限制与我的数据更好地同步，但我希望这有助于其他遇到同样问题的人。

欢呼