Question

我是Angular的新手并且有问题。

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

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>

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

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变为空。

对于页面之间的路由，我使用$ 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 docs ...

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

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

Answer 2

感谢查理·马丁对单身人士服务的想法。

我创建了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;
});

所以，这是我控制器代码的一部分：

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

当我首先加载我的控制器时，我得到默认约会，这将是今天。如果范围更改的params - appointmentService从另一个注入的服务（dateSharedService，doctorSharedService）获取它。

带AngularJS的后退/返回按钮

2 个答案: