如何仅在数据库发生更改时更新角度视图

Posted 2023-02-26

【中文标题】如何仅在数据库发生更改时更新角度视图

【英文标题】：how to update angular view only there is a change on database

【发布时间】：2016-04-13 05:03:40

【问题描述】：

仅当我在数据库中搜索的表发生更改时，我才需要更新我的 ng-repeat。如您所见，我目前每 700 毫秒在角度上使用 $interval 执行此操作：

var app = angular.module("games", []);

app.factory('app', ['$http', function($http, $interval) 

var obj=;
obj.getGames = function()  
    return $http.get('ajax/gameread.php');

return obj;

]);

app.controller("gamesCtrl", function($scope, $interval, app) 
    $interval(callInterval, 700);
    function callInterval()
    app.getGames().then( function(data) 
    $scope.games = data.data;
    ); 
  
);

还有html：

 <div class="col-xs-8">
            <table ng-app="games" ng-controller="gamesCtrl" class="gametable">
            <tbody>
            <tr>

                <td id="box-title-games"><div class="left leftbox"><p class="sbold">Active Games</p></div> <a href="#"><div id="addgame" class="rightbox rightboxchar right"><p><i class=" fa fa-plus"></i> Add Game</p></a></div></td>
            </tr>
                <tr class="ops" ng-repeat="game in games">
                <td id="gamesli">game.game_p1 game.gamebet <span class="last"><a href="gameplay/game.game_id" target="_blank" class="enter"><span class="letter-format-table">Enter</span></a></span></td>
                </tr>
                </tbody>
                </table>
        </div>

ajax/gameread.php 的输出是一个 json，其中包含我需要的每个表信息。

但是这样做的目的是每 700 毫秒更新一次视图，正如您在我使用 $interval 的控制器上看到的那样。我想要做的不是使用 $interval，而是使用在 ng-repeat 上添加新的 <TD> 如果创建了新游戏或删除 <TD> 如果该内容已更改，如下所示：

if(new game on table games) 在 html 上添加一个带有信息的新 td

if(gamestatus changed on table games) delete that TD from html

【参考方案1】：

只要您正确操作游戏集合，视图就会相应更新。

【讨论】：

是的，它会，但如果集合没有被操纵，它会不断更新现有的 TD，这很烦人，因为它看起来像在闪烁，你不能选择它们的文本，因为每 700 毫秒（当它再次更新）您的选择将消失