AngularJS的后退/返回按钮

Back/Return button with AngularJS

本文关键字：返回 按钮 AngularJS      更新时间：2024-02-27

我是Angular的新手，遇到了一个问题。

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

约会摘要.html

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

当我点击约会汇总.html上的"消息历史记录"按钮时，我重新定位到MessageHistiry.html页面，该页面有一个"返回"按钮。

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

当我按下此按钮时，我会返回到重新加载的约会和约会ControllerSummary列表，并且$scope.appts变为null。

对于页面之间的路由，我使用$routeProvider（与下面相同）

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

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

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

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

然后在你的控制器中，你可以做…

$scope.appts = MyService.appts;

当您重新加载控制器时，服务中的appts变量不会被重新加载，数据将被保留。从棱角分明的文件。。。

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

通常，当保留状态是问题时，单态是解决方案。

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

当我第一次加载控制器时，我会得到默认的约会，这将在今天发生。如果作用域中的参数发生了更改，那么appointmentService将从另一个注入的服务（dateSharedService、doctorSharedService）中获取它。

相关文章：