自动刷新$ scope

Question

我正在制作一个Angular Recipe App，它从MySQL数据库中检索数据并在屏幕上显示。我有一个＆＃34;喜欢＆＃34;的功能。食谱和它只是加上总数的计数。但每次我喜欢它，我都要刷新页面。我希望范围能够自我更新。我试过使用push（）函数和apply（），但我不能让它工作。有人可以帮帮我吗？

Dishes.html

<div class="" ng-controller='dishesController' >

<div class="dishPanel" ng-repeat='dish in dishes'>
    <div class="imageDishPanel">
        <img ng-src={{dish.link}} />
        <div class="slideBoxDown custFont titleDishPanel">
            {{dish.name}}
        </div>

        <div class="slideBoxUp">
            <div class=" infoTextDishPanel custFont">
                {{dish.info}}
            </div>
        </div>
    </div>

    <div class="loveDishPanel">
        <div ng-click='getID(dish.id, dish.likes)' class="heart"></div>
        <div class="likes custFont">{{dish.likes}} likes</div>
    </div> 
</div>

dishesController.js

app.controller('dishesController', ["$scope", "$http","dishesFactory", function($scope, $http, dishesFactory){
dishesFactory.getDataDishesFactory(function(data){
    $scope.dishes = data;
});

$scope.getID = function(id,like){
    $scope.likes  ={
        "id": id,
        "like": like
    };
    $scope.updateLike();
};

$scope.updateLike = function(){
    $http.post("php/updateLike.php",$scope.likes)
        .success(function(data){

        }
    );
};
}]);

编辑：所以我正在做的是显示数据库中的所有菜肴。每道菜都有他的＆＃34;喜欢＆＃34;计数和唯一ID。如果你按下＆＃39;喜欢＆＃39;它将调用getID（id，like）;函数和那个调用updateLike函数。 updateLike函数将数据（id和类似计数）发送到updateLike.php文件，并从那里将原始计数加1。新计数将在数据库中更新。因此，在html页面上，我必须自己刷新以查看新计数。我想让计数自我刷新。为此，我尝试使用$scope.dishes[$scope.id].likes.push(data)从控制器中的成功回调中推送数据。所以我必须把新的数字推到正确的菜，因为它是一系列的菜肴。但我无法把它推到正确的菜..

updateLike.php

<?php
require 'connect.php';
$data = json_decode(file_get_contents("php://input"));

$id =  $data->id;
$like = (int) $data->like;

$like++;
//$like = var_dump($data->like);

$query = "UPDATE `recipes` SET `likes`='$like' WHERE `id` = '$id' ";
mysql_query($query,$con);


echo $like;

Answer 1

你甚至不记得喜欢哪道菜。

在.success函数中，您需要这样的内容;

.success(function () {
    // update the likes of the right dish object in $scope.dishes; dishObj.likes++;
});

只要您这样做，您的视图就会自动更新。从它的外观来看，你并没有真正做出AngularJS最为人所知的双向数据绑定; - ）

Answer 2

你制作的东西太复杂了。你想做的事情很简单。

进行以下更改

in html

         <div ng-click='getID(dish)' class="heart"></div>

控制器中的

$scope.getID = function(dish){
    //Ideally dish.like++ would be done here itself to give instant feeling
    like  ={
        "id": dish.id,
        "like": dish.like
    };
    $scope.updateLike(like, dish);
};

$scope.updateLike = function(like, dish){
    $http.post("php/updateLike.php",like)
        .success(function(data){
            dish.like=data.like;//under the impression the response have like count;
         }
        ).error(function(data){
           //and do dish.like-- if an error happens.
        });
 };