2013-08-16 2 views
1

Apache와 MySQL이있는 Linux 서버에서 실행되는 간단한 CRUD 앱이 있습니다. 데이터베이스 작업은 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을 처음로드 I합니다 (Scenes.query를 사용할 때) 메서드를 사용하여 목록을 초기화합니다. updateScenes() -method는 범위를 업데이트하기 위해 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와 함께 오히려 초보자입니다. 그래서 내가 여기에서 놓친 것이있을 것입니다.

+1

을, 어떤 업데이트를 표시하지 않습니다. 그러나 업데이트는 비동기식이므로 업데이트 직후에 데이터를 가져 오면 서버의 다른 스레드에 도달하고 결과가 원래 업데이트가 완료되기 전에 실제로 반환 될 수 있습니다. '$ save()'메소드는 콜백 함수를 사용하여 저장이 완료된 시점을 알려줍니다. – Duncan

+0

예, 게시물에 다른 컨트롤러를 추가했습니다. 타이밍과 관련이 있다고 생각했습니다. 불행히도 저는'$ save() 메서드는 당신이 사용할 수있는 콜백 함수를 사용합니다 .' 어떻게 할 것인지 이해할 수없는 그런 noobie입니다. 그래서 내가 어떻게 할 수 있는지 당신이 정교 할 수 있다면? – stonerichnau

+0

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

답변

2

이 @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); 
+0

좋아, 작동하는 것! 고맙습니다. 한 가지 더 사소한 질문 : 왜'$ scope.updateScenes'는 작동하지만'$ scope.updateScenes()'가 아닌가? – stonerichnau

+1

위의 두 번째 발췌 문장은 첫 번째 발췌 문장과 비슷합니다. updateScenes 함수를 add() 메서드에 전달합니다. add() 메서드는 성공적인 응답을 받으면이 updateScenes 함수를 호출합니다. 위의 두 번째 스 니펫에서'updateScene'을'updateScenes()'로 대체하면 ** updateScene 함수를 호출하고이 함수의 결과 (아마도 정의되지 않았을 것입니다)를'add()'함수로 전달합니다. –

관련 문제