ionic-angularjs-在Android設備上重新打開應用程序后未呈現列表

Question

我有這個移動應用程序，其中列出了編碼的運輸/出租車收據的記錄。 打開應用程序時看到的第一頁是收據列表。

模板/列表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)的按鈕，它將轉到添加/編輯收據頁面：

模板/編輯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控制器，因此我在其中放置了用於backbutton的事件監聽器：

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中構建並運行后，我的應用中出現了這種情況：

1. 打開應用程序。 最初有0條記錄
2. 添加兩個項目-列表頁面中的2條記錄
3. 當前在列表頁面上，然后退出應用程序（navigator.app.exitApp（）觸發器）
4. 再次打開應用，仍然有2條記錄
5. 添加一項-列表頁面中的3條記錄
6. 再次在列表頁面上，然后退出應用
7. 打開應用， 缺少列表

場景的屏幕截圖在這里

當我不使用backbutton事件偵聽器時，不會發生這種情況，但是如果退出退出應用程序之前它在列表和編輯頁面之間進行切換時，會感到很煩。

我使用$window.localStorage存儲數據，然后將其$scope.receipts給ng-repeat列表的$scope.receipts ，我嘗試通過插入alert()與從localStorage獲取的接收對象作為參數來調試它。 警報消息中有一個值，但列表不起作用。 另一件事是，它仍然可以從$scope.receipts計算總票價（也如屏幕截圖所示）。

非常感謝。

Answer 1

我想我找到了問題。 我不知道如何在瀏覽器上復制它，但是我能夠在Android Device Monitor中捕獲它

11-12 03:08:23.861: I/chromium(30444): [INFO:CONSOLE(139)] "Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.3/ngRepeat/dupes?p0=[Some data from my app URL encoded. It's too long]
11-12 03:08:23.861: I/chromium(30444):     at Error (<anonymous>)
11-12 03:08:23.861: I/chromium(30444):     at file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:37:416
11-12 03:08:23.861: I/chromium(30444):     at file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:309:261
11-12 03:08:23.861: I/chromium(30444):     at Object.fn (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:162:168)
11-12 03:08:23.861: I/chromium(30444):     at n.$digest (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:163:259)
11-12 03:08:23.861: I/chromium(30444):     at n.$apply (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:166:269)
11-12 03:08:23.861: I/chromium(30444):     at l (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:118:152)
11-12 03:08:23.861: I/chromium(30444):     at F (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:122:187)
11-12 03:08:23.861: I/chromium(30444):     at XMLHttpRequest.K.onload (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:123:220)", source: file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js (139)

我搜索了ngRepeat：dupes -AngularJS不允許重復，建議使用track by以避免此類錯誤。 所以我更改了代碼，並在ng-repeat上使用了它。

使用正確的格式，我寫道：

ng-repeat="receipt in receipts|orderBy:'receiptDate'| filter:receiptFilter track by receipt.id"

我嘗試在orderBy之后按orderBy track by但無法正常工作。 我發現它應該在filter之后才能起作用。 所以我在控制器下創建了一個receiptFilter變量（諸如$scope.receiptFilter = "";類的空字符串）只是為了使ng-repeat結果無害。

在訴諸於track by receipt.id進行track by receipt.id之前，我嘗試track by $index但是錯誤仍然存​​在。 我尋找答案，發現使用orderBy時使用$index是不安全的。

總之，在排序時（ orderBy ），請使用track by <a unique key> （不是$index ）進行track by <a unique key> 。

我希望這個答案會有所幫助，對此的更多補充將不勝感激。 :)