AngularJS가있는 뒤로/돌아 가기 버튼

Question

저는 Angular가 새롭고 문제가 있습니다.

항목 목록 (일부 약속)이있는 페이지가 있습니다. 내가 페이지 이주 - 나는 AppointmentsSummary.html에있는 버튼 "메시지 역사"를 클릭

function AppointmentsSummaryController($scope, $location, AppointmentResource) { 
console.log("loaded.."); 
$scope.appts = AppointmentResource.getAll({ 
      .....(params) 
     }); 

} 

:

AppointmentsSummary.chtml

<div class="border-section"> 
    <table> 
     <thead> 
     ... 
     </thead> 
     <tbody> 
     <tr ng-repeat="app in appts"> 
      <td> 
      <a href="#/Appointments/AppointmentsSummary/MessageHistory/{{app.patientId}}"> 
       <button type="button">Message history</button> 
      </a> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

그리고이 템플릿에 대한 컨트롤러가 MessageHistiry.html에는 "뒤로"버튼이 있습니다. 나는이 버튼을 누르면

<a href="#/Appointments/AppointmentsSummary"> 
    <button type="button">Back</button> 
</a> 

, 나는 약속의 목록으로 돌아가 AppointmentsControllerSummary 다시로드 및 scope.appts $가 null이됩니다. 페이지 사이를 라우팅

나는 (아래와 같은) $ routeProvider

$routeProvider.when(/Appointments/AppointmentsSummary/MessageHistory/:patientId', { 
         controller:'MessageHistoryController', 
         templateUrl:'Template/MessageHistory', 
         reloadOnSearch: false 

내가없는이 컨트롤러를 다시 내 $ 범위의 데이터를 저장할 수를 사용?

Answer 1

데이터를 서비스에 저장해야합니다. 서비스는 싱글 톤이므로 항상 동일한 인스턴스를 반환하므로 상태를 유지합니다. 컨트롤러는로드 될 때마다 다시 인스턴스화되어 상태를 보존하지 않습니다.

myApp.factory('MyService', function() { 
    var appts = AppointmentResource.getAll({ 
     .....(params) 
    }); 

    return { 
     appts: appts 
    }; 
}); 

그런 다음 컨트롤러에, 당신은 당신이 컨트롤러를 다시로드하고 데이터를 보존 할 때 ..

$scope.appts = MyService.appts; 

(가) 다시로드되지 않습니다 서비스에 변수를 appts 할 수 있습니다. angular docs ...

"마지막으로 모든 각도 서비스가 응용 프로그램 싱글 톤임을 인식하는 것이 중요합니다. 즉, 인젝터 당 주어진 서비스 인스턴스가 하나만 있다는 것을 의미합니다."

종종 상태 보존이 문제가 될 때 싱글 톤이 해결책입니다.

Answer 2

싱글 톤 서비스에 대한 아이디어로 Charlie Martin에게 감사드립니다. 이는 오늘날 것, 내가 처음에 내 컨트롤러를로드 할 때

function AppointmentsSummaryController($scope, appointmentService) { 
    $scope.appts = appointmentService.appts; 

    $scope.$on('firstDateChanges', function() { 
     appointmentService.reloadAppts(); 
     $scope.appts = appointmentService.appts; 
    }); 

    $scope.$on('secondDateChanges', function() { 
     appointmentService.reloadAppts(); 
     $scope.appts = appointmentService.appts; 
    }); 
    ..... 
} 

, 나는 기본 약속을 얻을 :

나는 그래서이 내 컨트롤러에서 코드의 부분은, appointmentService

.factory('appointmentService', function (AppointmentResource, dateSharedService, doctorSharedService) { 

    appointmentService = {}; 

    appointmentService.reloadAppts = function() { 
     appointmentService.appts = AppointmentResource.getAll({ 
      filterFirstDate: dateSharedService.firstDate, 
      filterSecondDate: dateSharedService.secondDate, 
      doctorIds: doctorSharedService.doctorIds 
     }); 
    }; 

    appointmentService.appts = AppointmentResource.getAll({ 
     filterFirstDate: dateSharedService.firstDate, 
     filterSecondDate: dateSharedService.secondDate, 
     doctorIds: doctorSharedService.doctorIds 
    }); 

    return appointmentService; 
}); 

만들고 . 범위의 params가 변경된 경우 - appointmentService는 다른 주입 된 서비스 (dateSharedService, doctorSharedService)에서 가져옵니다.