如何在AngularJS中的数据库操作后更新列表

我有一个简单的CRUD应用程序，运行在Linux服务器上，使用Apache和MySQL。数据库操作由PHP脚本完成。 crud操作正常，服务器与开发中的机器不在同一台机器上。如何在AngularJS中的数据库操作后更新列表

一切都很好，但是当我尝试在创建，更新或删除操作后列出数据库中的项目时，列表有时会更新，有时却不会。

这是代码。

的index.html：

<body ng-controller="GetScenesCtrl"> 

    <ul> 
     <li ng-repeat="scene in scenes"> 
     <em><a href="#/getscene/{{scene.scene_id}}">{{scene.scene_name}}</a></em> 
     </li> 
    </ul>

服务：

angular.module('writServices', ['ngResource']) 
     .factory('Scenes', function($resource){ 
     return $resource('/:id/:nimi/:sisalto/:pics', {}, { 
      query: { 
      url:'php/getscenes.php', 
      method:'GET', 
      isArray:true 
      } 
    }); 

    App.service('ScenesService', function ($rootScope, Scenes) {  
     var scenes = []; 

     this.setScenes = function() { 
     scenes = Scenes.query(); 
     $rootScope.$broadcast('updscenes', scenes); 
     }; 
     this.getScenes = function() { 
     scenes = Scenes.query(); 
     return scenes; 
     };   
    });

控制器：

App.controller('GetScenesCtrl', function($scope, Scenes, ScenesService) { 

     $scope.scenes = Scenes.query(); 
     //$scope.scenes = ScenesService.setScenes(); 
     //$scope.scenes = ScenesService.getScenes();  

     //$scope.$on('updscenes', function(event, scenes) { 
     // $scope.scenes = scenes; 
     //}); 

     $scope.updateScenes = function() { 
      $scope.scenes = Scenes.query(); 
     }; 

    });

好了，所以当index.html的第一次加载我使用Scenes.query（）方法来初始化列表。在CRUD操作之后调用updateScenes（） - 方法来更新范围。此调用来自另一个控制器。就像这样：

App.controller('AddSceneCtrl', function($scope, Scenes, ScenesService) { 

    $scope.addScene = function(scene) { 

    Scenes.add({   
        nimi : scene.name, 
        sisalto : scene.content 
        }); 

     $scope.updateScenes(); 
     //$scope.scenes = ScenesService.getScenes();  
     //ScenesService.setScenes();      
    } 

    });

更新我已经试过是广播方式的范围，两者的工作方式同样留下有时未被更新列表的另一种方式。为什么是这样？这样做肯定有更好的方式，Angular方式。我相当喜欢Angular的新手，所以我必须在这里错过一些东西。

石

来源

2013-08-16 stonerichnau

您发布的代码似乎只能查询，它不显示任何更新。但是，我认为更新是异步的，因此如果在更新后立即获取数据，它可能会在服务器上碰到另一个线程，并且在原始更新完成之前实际返回结果。 '$ save（）'方法带有一个回调函数，您可以使用该函数来告知保存何时完成。 – Duncan

是的，我添加了另一个控制器的帖子。我认为这可能与时间有关。不幸的是，我是这样一个noobie，我不明白我会怎么做'$ save（）方法需要一个回调函数，你可以使用''。所以如果你能详细说明我会怎么做？ – stonerichnau

http://bresleveloper.blogspot.co.il/2013/08/angularjs-and-ajax-angular-is-not.html – bresleveloper

要随动从@Duncan的评论，这里是从the documentation报价：

重要的是要认识到，调用$资源对象方法立即返回一个空引用（对象或为重要数组取决于isArray）。一旦从服务器返回数据，现有参考将填入实际数据。这是一个有用的技巧，因为通常资源被分配给一个模型，然后由该模型渲染。拥有一个空对象不会导致渲染，一旦数据从服务器到达，那么该对象将被填充数据，并且视图会自动重新渲染自己以显示新数据。这意味着在大多数情况下，不必为动作方法编写回调函数。

类对象或实例对象上的动作的方法可以使用以下参数来调用：

HTTP GET "class" actions: Resource.action([parameters], [success], [error]) 
non-GET "class" actions: Resource.action([parameters], postData, [success], [error]) 
non-GET instance actions: instance.$action([parameters], [success], [error])

成功回调调用与（值，responseHeaders响应）参数。使用（httpResponse）参数调用错误回调。

所以，你应该做的：

Scenes.add(
    {   
     nimi : scene.name, 
     sisalto : scene.content 
    }, 
    function() { // this function is invoked when the add is successful 
     $scope.updateScenes(); 
    });

或者干脆

Scenes.add(
    {   
     nimi : scene.name, 
     sisalto : scene.content 
    }, 
    $scope.updateScenes);

来源

2013-08-16 14:47:39

好吧，似乎工作！谢谢。但是还有一个小问题：为什么'$ scope.updateScenes'工作，但不是'$ scope.updateScenes（）'？ – stonerichnau

上面的第二个片段与第一个片段相似。它将updateScenes函数传递给add（）方法。当接收到成功的响应时，add（）方法调用此updateScenes函数。在上面的第二个代码片段中用'updateScenes（）'代替'updateScene'会**调用updateScene函数，并将此函数的结果（可能未定义）传递给'add（）'函数。 –

如何在AngularJS中的数据库操作后更新列表

回答

相关问题