【发布时间】：2015-11-14 15:02:42
【问题描述】：
我有这个移动应用程序，其中列出了编码的运输/出租车收据记录。打开应用看到的第一页是收据列表。
templates/list-view.html
<ion-item class="card item item-light" ng-click="edit({{receipt.id}})" ng-repeat="receipt in receipts|orderBy:'receiptDate'">
...
</ion-item>
...
<ion-footer-bar class="bar-subfooter taxi-subfooter">
<div class="row">
<div class="col">
<button ng-click="addRecord(-1)" class="button button-block"><i class="icon ion-plus-round"></i></button>
</div>
</div>
如果我单击该项目或单击带有addRecord(-1) 的按钮，它将转到添加/编辑收据页面：
templates/edit-receipt.html
<ion-content padding="true" class="has-header has-footer taxi-has-subfooter">
<div class="table">
<div class="row">
<div class="col title">Paper receipt provided?</div>
<div class="col taxi-col">
<label class="toggle toggle-balanced">
<input type="checkbox" ng-model="bindReceipt.hasReceipt">
<div class="track taxi-track">
<div class="handle taxi-handle"></div>
</div>
</label>
<input type="hidden" ng-model="bindReceipt.id" />
</div>
</div>
<div class="row">
<div class="col title">Date</div>
<div class="col taxi-col"><input type="date" ng-model="bindReceipt.receiptDate" /></div>
</div>
<div class="row">
<div class="col title">Vendor</div>
<div class="col taxi-col"><input type="text" placeholder="Name of the Taxi" ng-model="bindReceipt.taxiVendor" /></div>
</div>
<div class="row">
<div class="col title">Fare</div>
<div class="col taxi-col"><input type="tel" placeholder="0.00" ng-model="bindReceipt.fare" /></div>
</div>
</div>
</ion-content>
<ion-footer-bar class="bar-subfooter taxi-subfooter">
<div class="row"> <!-- update() functions also as add -->
<div class="col taxi-col"><button class="button button-block" ng-click="update()">{{transType}}</button></div>
</div>
</ion-footer-bar>
我对手机后退按钮的行为所做的是，如果状态在添加/编辑页面上，它只会返回列表页面，如果状态在列表页面上，无论如何很多时候，用户会从/到列表和编辑页面，它应该退出应用程序（不返回应用程序历史记录）。所以，我使用navigator.app.exitApp()作为列表页面的后退按钮。
templates/list-view.html 使用 ReceiptsCtrl 控制器，所以我把我的事件监听器放在那里作为后退按钮：
app.controller('ReceiptsCtrl', function($window, $scope, $filter, $state, $http, $ionicPopup, Receipts) {
$scope.receipts = Receipts.getReceipts();
$scope.historyBack = function(evt) {
if(evt != null) {
if(evt.preventDefault) {
evt.preventDefault();
}
}
var location = $window.location.href;
if(location.charAt(location.length-1) === '/') {
navigator.app.exitApp(); // exit the application
} else {
history.go(-1);
}
}
document.addEventListener('backbutton', $scope.historyBack, false);
});
services.js
.factory('Receipts', function($window, $filter) {
var receipts = JSON.parse($window.localStorage.getItem('receipts')) || [];
return {
getReceipts: function() {return receipts;}
}
});
这是我的问题，在我构建并在 android 中运行后，我的应用中出现了这种情况：
- 打开应用程序。最初有 0 条记录
- 添加两项 - 列表页中的 2 条记录
- 当前在列表页面然后退出应用（navigator.app.exitApp() 触发器）
- 再次打开应用，还有2条记录
- 在列表页面中添加一项 - 3 条记录
- 再次在列表页面上然后退出应用程序
- 打开应用，缺失列表
场景截图here
当我不使用后退按钮事件侦听器时不会发生这种情况，但如果它在退出应用程序之前在列表和编辑页面之间遍历历史记录，我会觉得很烦人。
我使用$window.localStorage 存储数据，然后将其传递给$scope.receipts 以获取列表ng-repeat，我尝试通过插入alert() 来调试它，并将从localStorage 获取的收据对象作为参数。警报消息中有一个值，但列表不起作用。另一件事是它仍然可以从$scope.receipts 计算总票价（也如屏幕截图中所述）。
非常感谢。
【问题讨论】：
-
请问你能做个小笨蛋吗？
标签： javascript android angularjs ionic