각도 응용 프로그램에서 페이지를 새로 고치지 않고보기를 새로 고치는 방법

Question

나는 연락처 보고서를 나열하는 간단한 응용 프로그램을 가지고 있습니다. 에 Mongolab에서 데이터를 가져 오는 목록보기를 만들었습니다.

app.factory('Contact',function($mongolabResource){ 
    return $mongolabResource('contacts'); 
}); 

function ContactCreateCtrl($scope,$location,Contact) { 
Contact.save(contact,function(){ 
     $location.path('/'); 
    }); 
}; 

: 그에

는 나 또한 자신의 사이트에서의 각 예에서 모델로

내가 컨트롤러에서 사용하는 기능을 제출하면 목록에 새 연락처 보고서를 만드는 입력 양식을 만든 $ location.path()는 페이지를 다시로드하는 콜백입니다.

어떻게 데이터를 제출했는지 (.save() 성공) 페이지를 다시로드하지 않고보기가 다시로드되도록이 코드를 다시 작성합니까?

내가 삭제 한 다음 배열을 다시 정의하는 시도했지만 작동 나던 것 :

Contact.save(contact,function(){ 
     delete $scope.contacts; 
     $scope.contacts = Contact.query(); 
    }); 

나뿐만 아니라 삭제 기능에이를 구현하고 싶습니다. 누군가 내가 이것을 배울 수있는 곳으로 나를 가리킬 수 있습니까? 어떤 도움

Answer 1

좋아요, 나는 데이터베이스에서 값을 가져 오도록 바이올린을 업데이트했습니다 : http://jsfiddle.net/joshdmiller/Y223F/2/.

app.controller('MainCtrl', function ($scope,Contact) { 
    $scope.updateContacts = function() { 
    Contact.query(function(data) { 
     $scope.contacts = data; 
    }); 
    }; 

    $scope.save = function(newContact) { 
    Contact.save(newContact, function() { 
     $scope.updateContacts(); 
    }); 
    }; 

    // The initial data load 
    $scope.updateContacts(); 
}); 

두 가지가 참고 :

가 새로운 기록이 작성 될 때 다시 호출 할 수 있도록 (1) 나는 함수로 몽고 쿼리를 이동

;

(2) $ mongolabResource는 성공시 콜백이 실행될 것으로 기대합니다. 앱을 제공하지 않아 앱이 깜박입니다. 즉, 쿼리를 호출 한 시간부터 가져 오기가 완료 될 때까지 목록이 비어 있습니다. 대신 새 데이터를 얻으려면 만으로 변경해야합니다. 나는 그것을 바꿨다.

수동으로 항목을 추가하거나 데이터베이스에서 가져 오는 측면에서 모범 사례는 유스 케이스를 기반으로하며 절충점이 있습니다. 그러나 이와 같은 작은 데이터의 경우 DB에서 가져옵니다.

Answer 2

에 대한

많은 감사 범위에 배열로 밀어 대해 아직 확실하지 않은이 작업을 가지고 있지만, 우리가 난 것

function ContactCreateCtrl($scope,$location,Contact) { 
    Contact.save(contact,function(){ 
    $scope.contacts.push(contact); 
}); 

또한 데이터베이스에서 가져올 수 있다면 더 좋을 것이다 연결 목적으로 db에 의해 자동으로 생성 된 _id 객체가 필요합니다. 이 방법은 나에게 _id, 어떤 통찰력도주지 않습니까?

Answer 3

firebase 인증 서비스를 사용하여 firebase에서 로그 아웃 한 후보기에서 데이터를 삭제 한 방법에 대한 답을 공유하고 있습니다. Signout 메소드에서 $scope.currentUser = null;을 호출 한 후에도 데이터가 계속 유지되었습니다. 다시로드하여 데이터 변경 사항을 확인해야했습니다. 최고의 UX가 아닙니다.

$scope.getCurrentUser = function() { 
     firebase.auth().onAuthStateChanged(function(user) { 
      if (user) { 
       // User is signed in. 
       $scope.currentUser = user; 
      } else { 
       // No user is signed in. 
       $scope.currentUser = null; 
       console.log('user not signed in.'); 
      } 
     }); 
    } 

$scope.getCurrentUser(); 


$scope.signout = function() { 
     firebase.auth().signOut().then(function() { 
      // Sign-out successful. 
      console.log('signed out success'); 
      $scope.getCurrentUser(); 
     }, function(error) { 
      // An error happened. 
      console.log(error); 
     }); 

    } 

그래서있는 getUserData 메소드를 호출하고, 장전없이보기를 업데이트 currentUser = NULL이 만드는. 이것은 firebase를 사용하는 예제이지만 약간의 조정으로 전체 페이지를 다시로드하지 않고도보기에서 데이터를 지우는 데 필요한 사항을 적용 할 수 있습니다.Firebase는 사용자 객체를 지우는 일이 무거워 보이지만 내 getCurrentUser 메소드에서 다시 검사하여 사용자가 있는지 확인한 다음보기를 다시로드하지 않고 $ 범위에서 지우지 않으면 내보기가 상관 없습니다.