Back/Return button with AngularJS

Question

I'm very new in Angular and have a problem.

I have page with list of a items (some appointments).

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>

And I have a controller for this template:

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

}

When I clicked on the button "Message history" on the AppointmentsSummary.html - I relocate to page MessageHistiry.html, which has a "Back" button.

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

When I push this button, I return to list of appointments and AppointmentsControllerSummary reloaded and $scope.appts becomes null.

For routing between pages I uses $routeProvider (same with below)

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

Can I not reload this controller and save my $scope data?

Charlie Martin · Accepted Answer · 2013-12-03 19:25:41Z

1

You need to save your data in a service. Services are singletons, meaning they always return the same instance and therefore preserve state. Controllers get re-instantiated each time they are loaded and therefore do not preserve state.

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

    return {
       appts: appts
    };
});

Then in your controller, you can just do..

$scope.appts = MyService.appts;

The appts variable in the service won't get reloaded when you reload controllers and the data will be preserved. From the angular docs...

"Lastly, it is important to realize that all Angular services are application singletons. This means that there is only one instance of a given service per injector."

Often when preserving state is the issue, singletons are the solution.

answered Dec 3, 2013 at 19:25

Charlie Martin

8,4363 gold badges39 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Artyom Pranovich Over a year ago

Thanks, but it works not correct for me. What about params? I gets list of appointments from DB with AppointmentResource (with $resource provider). So, params sending to this resource from AppointmentSummary.html scope. And, when I change this $scope, i need reload data.

Artyom Pranovich · Accepted Answer · 2013-12-04 09:15:46Z

Thanks to Charlie Martin for idea with singleton-service.

I create 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;
});

And, so, this is part of code from my controller:

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;
    });
    .....
}

When I load my controller at first, I get default appointments, which will today. If params from scope changes - appointmentService get it from another injected services (dateSharedService, doctorSharedService).

Collectives™ on Stack Overflow

Back/Return button with AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related