1

我有一个简单的 CRUD 应用程序在带有 Apache 和 MySQL 的 Linux 服务器上运行。数据库操作由 PHP 脚本完成。crud 操作运行良好，服务器与开发机器位于不同的机器上。

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

这是代码。

索引.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() 方法来初始化列表。updateScenes() 方法在 CRUD 操作之后调用以更新范围。此调用来自另一个控制器。像这样：

    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 的新手，所以这里一定有一些我错过的东西。

结石

4

1 回答 1

2

要跟进@Duncan 的评论，以下是文档中的引用：

重要的是要意识到调用 $resource 对象方法会立即返回一个空引用（对象或数组取决于 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])

使用 (value, 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-16T14:47:39.327 回答