AngularJS的返回/返回按钮

Question

我是Angular的新手，有问题。

我的页面上有一个项目列表（一些约会）。

约会Summary.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>

我有一个用于此模板的控制器：

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

}

当我单击AppointmentsSummary.html上的“消息历史记录”按钮时-我重新定位到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

我可以不重新加载该控制器并保存$ scope数据吗？

Answer 1

您需要将数据保存在服务中。 服务是单例，这意味着它们始终返回相同的实例，因此保留状态。 控制器在每次加载时都会重新实例化，因此不会保留状态。

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

    return {
       appts: appts
    };
});

然后在您的控制器中，您可以做..

$scope.appts = MyService.appts;

当您重新加载控制器时，服务中的appts变量将不会重新加载，并且数据将被保留。 从角度文档 ...

“最后，重要的是要意识到所有Angular服务都是应用程序单例。这意味着每个注入器只有给定服务的一个实例。”

通常，当要保留状态时，单例就是解决方案。

Answer 2

感谢Charlie Martin对于单例服务的想法。

我创建约会服务

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

因此，这是控制器代码的一部分：

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

最初加载控制器时，将获得默认约会，该约会将在今天开始。 如果作用域中的参数发生了变化，则约会服务会从另一个注入的服务（dateSharedService，doctorSharedService）中获取约会服务。