fix(history): Separate histories and views, clear other views in clearHistory(), closes #724

Adam Bradley · Adam Bradley · commit c99427aa9221 · 2014-03-06T10:58:33.000-06:00
diff --git a/js/ext/angular/src/service/ionicView.js b/js/ext/angular/src/service/ionicView.js
@@ -7,6 +7,7 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
   // init the variables that keep track of the view history
   $rootScope.$viewHistory = {
     histories: { root: { historyId: 'root', parentHistoryId: null, stack: [], cursor: -1 } },
+    views: {},
     backView: null,
     forwardView: null,
     currentView: null,
@@ -199,7 +200,7 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
           if(forwardView && currentView.stateId !== forwardView.stateId) {
             // they navigated to a new view but the stack already has a forward view
             // since its a new view remove any forwards that existed
-            var forwardsHistory = this._getView(forwardView.historyId);
+            var forwardsHistory = this._getHistoryById(forwardView.historyId);
             if(forwardsHistory) {
               // the forward has a history
               for(var x=forwardsHistory.stack.length - 1; x >= forwardView.index; x--) {
@@ -215,8 +216,8 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
           rsp.navAction = 'initialView';
         }
 
-        // add the new view to the stack
-        viewHistory.histories[rsp.viewId] = this.createView({
+        // add the new view
+        viewHistory.views[rsp.viewId] = this.createView({
           viewId: rsp.viewId,
           index: hist.stack.length,
           historyId: hist.historyId,
@@ -230,7 +231,7 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
         });
 
         // add the new view to this history's stack
-        hist.stack.push(viewHistory.histories[rsp.viewId]);
+        hist.stack.push(viewHistory.views[rsp.viewId]);
       }
 
       this.setNavViews(rsp.viewId);
@@ -243,7 +244,7 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
     setNavViews: function(viewId) {
       var viewHistory = $rootScope.$viewHistory;
 
-      viewHistory.currentView = this._getView(viewId);
+      viewHistory.currentView = this._getViewById(viewId);
       viewHistory.backView = this._getBackView(viewHistory.currentView);
       viewHistory.forwardView = this._getForwardView(viewHistory.currentView);
 
@@ -335,16 +336,20 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
       }
     },
 
-    _getView: function(viewId) {
-      return (viewId ? $rootScope.$viewHistory.histories[ viewId ] : null );
+    _getViewById: function(viewId) {
+      return (viewId ? $rootScope.$viewHistory.views[ viewId ] : null );
     },
 
     _getBackView: function(view) {
-      return (view ? this._getView(view.backViewId) : null );
+      return (view ? this._getViewById(view.backViewId) : null );
     },
 
     _getForwardView: function(view) {
-      return (view ? this._getView(view.forwardViewId) : null );
+      return (view ? this._getViewById(view.forwardViewId) : null );
+    },
+
+    _getHistoryById: function(historyId) {
+      return (historyId ? $rootScope.$viewHistory.histories[ historyId ] : null );
     },
 
     _getHistory: function(scope) {
@@ -493,11 +498,11 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
     },
 
     clearHistory: function() {
-      var historyId, x, view,
+      var
       histories = $rootScope.$viewHistory.histories,
       currentView = $rootScope.$viewHistory.currentView;
 
-      for(historyId in histories) {
+      for(var historyId in histories) {
 
         if(histories[historyId].stack) {
           histories[historyId].stack = [];
@@ -514,6 +519,12 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
 
       }
 
+      for(var viewId in $rootScope.$viewHistory.views) {
+        if(viewId !== currentView.viewId) {
+          delete $rootScope.$viewHistory.views[viewId];
+        }
+      }
+
       this.setNavViews(currentView.viewId);
     }
 
diff --git a/js/ext/angular/test/history.html b/js/ext/angular/test/history.html
@@ -0,0 +1,136 @@
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+  <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+  <script src="../../../../dist/js/ionic.bundle.js"></script>
+</head>
+
+<body ng-app="starter" animation="slide-left-right-ios7">
+  <ion-nav-bar type="bar-light" animation="nav-title-slide-ios7" back-button-type="button-icon button-clear" back-button-icon="ion-ios7-arrow-back" back-button-label="Back"></ion-nav-bar>
+
+  <ion-nav-view></ion-nav-view>
+
+  <script>
+    angular.module('starter', ['ionic', 'starter.services', 'starter.controllers'])
+    .run(function($templateCache){
+      $templateCache.put("templates/about.html","<ion-view title=\"'About Ionic'\"><ion-content has-header=\"true\" has-tabs=\"true\" padding=\"true\"></ion-content></ion-view>");
+
+      $templateCache.put("templates/tabs.html","<ion-tabs tabs-style=\"tabs-icon-top\" tabs-type=\"tabs-default\"><ion-tab title=\"Pets\" icon=\"icon ion-home\" href=\"#/tab/pets\"><ion-nav-view name=\"pets-tab\"></ion-nav-view></ion-tab><ion-tab title=\"About\" icon=\"icon ion-search\" href=\"#/tab/about\"><ion-nav-view name=\"about-tab\"></ion-nav-view></ion-tab></ion-tabs>");
+      $templateCache.put("templates/pet-index.html","<ion-view title=\"'Pet Information'\"><ion-content has-header=\"true\" has-tabs=\"true\"><div class=\"list\"><a class=\"item item-thumbnail-left\" ng-repeat=\"pet in pets\" ng-href=\"#/tab/pet/{{pet.id}}\" ><img ng-src=\"{{pet.thumbnail}}\"><h3>{{pet.title}}</h3><p>{{pet.description}}</p></a></div></ion-content></ion-view>");
+      $templateCache.put("templates/pet-detail.html","<ion-view title=\"pet.title\" right-buttons=\"rightButtons\"><ion-content has-header=\"true\" padding=\"true\"><p>{{ pet.description }}</p><p><a class=\"button button-small icon ion-arrow-left-b\" href=\"#/tab/pets\"> All Pets</a></p><button class=\"button button-small\" ng-click=\"clearViewHistories()\">clearViewHistories</button><button class=\"button button-small\" ng-click=\"historyConsole()\">Console Log</button><pre>{{ $viewHistory | json }}</pre></ion-content></ion-view>");
+
+    })
+    .config(function($stateProvider, $urlRouterProvider) {
+      $stateProvider
+        .state('tab', {
+          url: "/tab",
+          abstract: true,
+          templateUrl: "templates/tabs.html"
+        })
+        .state('tab.pet-index', {
+          url: '/pets',
+          views: {
+            'pets-tab': {
+              templateUrl: 'templates/pet-index.html',
+              controller: 'PetIndexCtrl'
+            }
+          }
+        })
+        .state('tab.pet-detail', {
+          url: '/pet/:petId',
+          views: {
+            'pets-tab': {
+              templateUrl: 'templates/pet-detail.html',
+              controller: 'PetDetailCtrl'
+            }
+          }
+        })
+        .state('tab.about', {
+          url: '/about',
+          views: {
+            'about-tab': {
+              templateUrl: 'templates/about.html'
+            }
+          }
+        });
+      $urlRouterProvider.otherwise('/tab/pets');
+
+    });
+
+    angular.module('starter.controllers', [])
+    .controller('PetIndexCtrl', function($scope, PetService) {
+      $scope.pets = PetService.all();
+    })
+
+    .controller('PetDetailCtrl', function($scope, $stateParams, PetService, $ionicModal, $rootScope, $ionicViewService) {
+      $scope.pet = PetService.get($stateParams.petId);
+      $scope.historyConsole = function () {
+        console.log($rootScope.$viewHistory);
+      };
+      $scope.clearViewHistories = function() {
+        $ionicViewService.clearHistory();
+      };
+    })
+
+    angular.module('starter.services', [])
+    .factory('PetService', function() {
+      var pets = [
+        {
+          id: 0,
+          title: 'Cats',
+          description: 'Furry little creatures. Obsessed with plotting assassination, but never following through on it.',
+          thumbnail: 'http://4.bp.blogspot.com/-MzZCzWI_6Xc/UIUQp1qPfzI/AAAAAAAAHpA/OTwHCJSWFAY/s1600/cats_animals_kittens_cat_kitten_cute_desktop_1680x1050_hd-wallpaper-753974.jpeg'
+        },
+        {
+          id: 1,
+          title: 'Dogs',
+          description: 'Lovable. Loyal almost to a fault. Smarter than they let on.' ,
+          thumbnail: 'http://davidfeldmanshow.com/wp-content/uploads/2014/01/dogs-wallpaper.jpg'
+        },
+        {
+          id: 2,
+          title: 'Turtles',
+          description: 'Everyone likes turtles.' ,
+          thumbnail: 'https://www.wildlifedepartment.com/wildlifemgmt/turtles/Common%20Map%20Turtle.jpg'
+        },
+        {
+          id: 3,
+          title: 'Sharks',
+          description: 'An advanced pet. Needs millions of gallons of salt water. Will happily eat you.' ,
+          thumbnail: 'http://upload.wikimedia.org/wikipedia/commons/e/ea/Prionace_glauca_1.jpg'
+        },
+        {
+          id: 4,
+          title: 'Cats',
+          description: 'Furry little creatures. Obsessed with plotting assassination, but never following through on it.',
+          thumbnail: 'http://4.bp.blogspot.com/-MzZCzWI_6Xc/UIUQp1qPfzI/AAAAAAAAHpA/OTwHCJSWFAY/s1600/cats_animals_kittens_cat_kitten_cute_desktop_1680x1050_hd-wallpaper-753974.jpeg'
+        },
+        {
+          id: 5,
+          title: 'Dogs',
+          description: 'Lovable. Loyal almost to a fault. Smarter than they let on.' ,
+          thumbnail: 'http://davidfeldmanshow.com/wp-content/uploads/2014/01/dogs-wallpaper.jpg'
+        },
+        {
+          id: 6,
+          title: 'Turtles',
+          description: 'Everyone likes turtles.' ,
+          thumbnail: 'https://www.wildlifedepartment.com/wildlifemgmt/turtles/Common%20Map%20Turtle.jpg'
+        }
+      ];
+
+      return {
+        all: function() {
+          return pets;
+        },
+        get: function(petId) {
+          // Simple index lookup
+          return pets[petId];
+        }
+      }
+    });
+
+  </script>
+</body>
+</html>
diff --git a/js/ext/angular/test/service/ionicViewService.unit.js b/js/ext/angular/test/service/ionicViewService.unit.js
@@ -88,7 +88,7 @@ describe('Ionic View Service', function() {
     expect(rootScope.$viewHistory.currentView.stateName).toEqual('home');
 
     expect(rsp.viewId).not.toBeUndefined();
-    expect(rootScope.$viewHistory.histories[rsp.viewId].viewId).toEqual(rsp.viewId);
+    expect(rootScope.$viewHistory.views[rsp.viewId].viewId).toEqual(rsp.viewId);
     expect(viewService.getBackView()).toEqual(null);
     expect(viewService.getForwardView()).toEqual(null);
 
@@ -684,7 +684,9 @@ describe('Ionic View Service', function() {
     expect(rootScope.$viewHistory.histories[tab1view2Reg.historyId].stack.length).toEqual(2);
     backView = viewService.getBackView();
     expect(backView).toBeDefined();
+    expect( Object.keys(rootScope.$viewHistory.views).length ).toEqual(4);
     viewService.clearHistory();
+    expect( Object.keys(rootScope.$viewHistory.views).length ).toEqual(1);
     expect(rootScope.$viewHistory.histories[tab1view2Reg.historyId].stack.length).toEqual(1);
     backView = viewService.getBackView();
     expect(backView).toEqual(null);
