javascript - angularjs和ionicframework如何实时增加喜欢

Question

我几乎是 AngularJS 和 IonicFramework 的新手。我正在开发我自己的应用程序，其中有一个带有时间线的小社交网络(我从 mysql 获得，我用 php 在 json 中编码)和类似的东西。这是一件非常简单的事情。

我使用 $http.get 来检索 json 数据，它是这样的:

        [{
        "id": "2",
        "timestamp": "2015-04-15 23:26:48",
        "autore": "reallidontknow",
        "likes": "2",
        "testo": "asd"
        },
        {
        "id": "3",
        "timestamp": "2015-04-15 23:26:39",
        "autore": "costi",
        "likes": "2",
        "testo": "rotfl"
        },
        {
        "id": "1",
        "timestamp": "2015-04-15 23:06:27",
        "autore": "stevvi",
        "likes": "1",
        "testo": "aaaaahahah"
        }
        ]

这是我的 HTML:

            <div class="list card" ng-repeat="post in posts">
          <div class="item item-avatar">
            <img src="img/icon.png"> 
            <h2>{{post.autore}}</h2>
            <p>{{post.timestamp}}</p>
          </div>

          <div class="item item-body">
            <p ng-bind-html="post.testo">

            </p>
            <p>
                <a href="#" class="subdued"><i>{{post.likes}}</i> Mi Piace</a>
            </p>
          </div>

          <div class="item tabs tabs-secondary tabs-icon-left">
            <a class="tab-item" href="#" ng-click="like(post.id)">
              <i class="icon ion-thumbsup"></i>
              Mi Piace!
            </a>
          </div>
        </div>

这是我的 Controller 的一部分:注意:使用 http get 我做了一个“发布”，我知道这是一种糟糕的方式但是很简单，所以 get 实际上做了一个发布。 (使用 idPost，我将帖子发送到服务器，该帖子必须在他喜欢的栏中 +1)

$scope.like = function(idPost) {
    var lsVar = "like"+idPost;
    if (window.localStorage[lsVar] != undefined)
    {
        return;
    }
    else
    {

        urLike = "http://my_link.php?ggettt="+idPost;
        $http.get(urLike).success(function(data, status, headers, config) {
            console.log(JSON.stringify(data));
            if ((data.idPost == "false") || (data.idPost == "null"))
            {
                alert("Error.\n retry!");
                $window.location.reload(true);
            }
            else if (data.idPost == "noId") {
                alert("Error FATAL.");
                $window.location.reload(true);
            }
            else {
                window.localStorage[lsVar] = idPost;
                alert("LIKE inserted");
                });

            }
        }).error(function(data, status, headers, config) {
            console.log(JSON.stringify(data));
        });
    }
}

我的问题是，如果我点击“喜欢”按钮，我必须使用 $window.location 重新加载整个页面(这太糟糕了!!!)，如您所见，因为如果我仅使用 $state 命令重新加载它不会重新加载任何东西.. 如果我使用 $route.reload() 也是一样。

我必须实时更改点赞(输入 +1)并将按钮从“事件” 更改为“不活动”/strong>

对于这个问题，如果一个人已经喜欢了(它保存在本地存储中所以它会记住它)并且这个人再次点击“喜欢”它会出现(因为它必须是)警报。但是当这个人点击“确定”并点击另一个地方时，警报再次出现。这是什么!？

Answer 1

关于没有立即看到 +1，那是因为您仅在收到来自服务器的“成功响应”时才更新本地存储。

为了修复你应该更换

<a class="tab-item" href="#" ng-click="like(post.id)">

与

<a class="tab-item" href="#" ng-click="like(post)">

然后，修改“赞”函数如下(考虑到从服务器返回的“数据”是包含赞的实际帖子):

$scope.like = function(post) {
    var lsVar = "like"+post.id;
    if (window.localStorage[lsVar] != undefined)
    {
        return;
    }
    else
    {

        urLike = "http://my_link.php?ggettt="+post.id;
        $http.get(urLike).success(function(data, status, headers, config) {
            console.log(JSON.stringify(data));
            if ((data.idPost == "false") || (data.idPost == "null"))
            {
                alert("Error.\n retry!");
                $window.location.reload(true);
            }
            else if (data.idPost == "noId") {
                alert("Error FATAL.");
                $window.location.reload(true);
            }
            else {
                window.localStorage[lsVar] = idPost;
                post = data;
                alert("LIKE inserted");
                });

            }
        }).error(function(data, status, headers, config) {
            console.log(JSON.stringify(data));
        });
    }
}

“帖子=数据；”可能需要根据您从服务器收到的响应进行一些更改+您可能必须执行 $scope.$apply() 或直接更新 $scope.posts 以刷新屏幕上的数据，但一般的想法是您有更新 $scope.posts 中的点赞数，以便它在屏幕上刷新。

无论如何，您应该知道最佳做法是在服务器端保存和验证哪个用户喜欢什么，因为在客户端保存和验证这意味着用户可以编辑/删除数据 + 同一用户将能够从不同的机器/浏览器，对同一个帖子点赞几次。

希望this demo会帮助你重新开始......