Memory leak?

demo/index.html

@@ -8,7 +8,7 @@
     <title>Angular Mobile Nav</title>
     <link rel="stylesheet" href="content/iui.css">
     <link rel="stylesheet" href="content/iui/default-theme.css" type="text/css"/>
-    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
     <script src="content/app.js"></script>
     <script src="mobile-nav.js"></script>
     <link rel="stylesheet" href="mobile-nav.css">

src/change.js

@@ -17,7 +17,6 @@ angular.module('ajoslin.mobile-navigate')
   var OUT_CLASS = "out";
   var REVERSE_CLASS = "reverse";
   var DONE_CLASS = "done";
-  var ANIMATION_END = "animationName" in document.documentElement.style ? "animationend" : "webkitAnimationEnd";
 
   this.setTransitionPreset = function(transitionName, inClass, outClass) {
     inClass = inClass || '';
@@ -28,7 +27,10 @@ angular.module('ajoslin.mobile-navigate')
     defaultOptions = angular.extend(defaultOptions, opts || {});
   };
 
-  this.$get = ['$q', '$rootScope', function($q, $rootScope) {
+  this.$get = ['$q', '$rootScope', '$sniffer', function($q, $rootScope, $sniffer) {
+    var ANIMATION_END = $sniffer.vendorPrefix ?
+      $sniffer.vendorPrefix.toLowerCase() + 'AnimationEnd' :
+      'animationend';
 
     return function change(next, prev, transType, reverse, options) {
       options = angular.extend(options || {}, defaultOptions);

src/navigate.js

@@ -31,15 +31,15 @@ angular.module('ajoslin.mobile-navigate')
         _onceTransition = trans;
       };
     }
-    
+
     function navigate(destination, source, isBack) {
       $rootScope.$broadcast('$pageTransitionStart', destination, source, isBack);
       nav.current = nav.next;
     }
 
-    /* 
+    /*
      * Will listen for a route change success and call the selected callback
-     * Only one listen is ever active, so if you press for example 
+     * Only one listen is ever active, so if you press for example
      * /link1 then press back before /link1 is done, it will go listen for the back
      */
     nav.onRouteSuccess = null;
@@ -72,7 +72,7 @@ angular.module('ajoslin.mobile-navigate')
       $location.path(path);
       //Wait for successful route change before actually doing stuff
       nav.onRouteSuccess = function($event, next, last) {
-        nav.current && navHistory.push(nav.current);
+        nav.current && navHistory.push(nav.current.path());
         nav.next = new Page(path, transition || (next.$$route && next.$$route.transition), isReverse);
         navigate(nav.next, nav.current, false);
       };
@@ -84,10 +84,10 @@ angular.module('ajoslin.mobile-navigate')
     nav.back = function() {
       if (navHistory.length > 0) {
         var previous = navHistory[navHistory.length-1];
-        $location.path(previous.path());
+        $location.path(previous);
         nav.onRouteSuccess = function() {
           navHistory.pop();
-          nav.next = previous;
+          nav.next = new Page(previous);
           navigate(nav.next, nav.current, true);
         };
         return true;

src/view.js

@@ -2,10 +2,10 @@ angular.module('ajoslin.mobile-navigate')
 .directive('mobileView', ['$rootScope', '$compile', '$controller', '$route', '$change', '$q',
 function($rootScope, $compile, $controller, $route, $change, $q) {
 
-  function link(scope, viewElement, attrs) {    
+  function link(scope, viewElement, attrs) {
     //Insert page into dom
     function insertPage(page) {
-      var current = $route.current, 
+      var current = $route.current,
       locals = current && current.locals;
 
       page.element = angular.element(document.createElement("div"));
@@ -27,64 +27,67 @@ function($rootScope, $compile, $controller, $route, $change, $q) {
       return page;
     }
 
+    var transitionListener = scope.$on('$pageTransitionStart', function ($event, dest, source, reverse) {
+      var current = $route.current ? $route.current.$$route : {};
+      var transition = reverse ? source.transition() : dest.transition();
 
-    var currentTrans;
-    scope.$on('$pageTransitionStart', function ($event, dest, source, reverse) {
-      function changePage() {
-        var current = $route.current && $route.current.$$route || {};
-        var transition = reverse ? source.transition() : dest.transition();
+      if (source && source.element) {
+        var siblings = source.element.parent().children();
+        for (var index = 0; index < siblings.length; index++) {
+          if (source.element[0] !== siblings[index]) {
+            angular.element(siblings[index]).scope().$destroy();
+            angular.element(siblings[index]).remove();
+          }
+        }
+      }
 
-        insertPage(dest);
+      insertPage(dest);
 
-        //If the page is marked as reverse, reverse the direction
-        if (dest.reverse() || current.reverse) {
-          reverse = !reverse;
-        }
+      //If the page is marked as reverse, reverse the direction
+      if (dest.reverse() || current.reverse) {
+        reverse = !reverse;
+      }
 
-        function doTransition() {
-
-          var promise = $change(dest.element, (source ? source.element : null),
-            transition, reverse);
-
-          promise.then(function() {
-            if (source) {
-              $rootScope.$broadcast('$pageTransitionSuccess', dest, source);
-              source.scope.$destroy();
-              source.element.remove();
-              source = undefined;
-            }
-          });
-
-          return promise;
-        }
+      function doTransition() {
 
-        //Set next element to display: none, then wait until transition is
-        //ready, then show it again.
-        dest.element.css('display', 'none');
-
-        //Allow a deferTransition expression, which is allowed to return a promise.
-        //The next page will be inserted, but not transitioned in until the promise
-        //is fulfilled.
-        var deferTransitionPromise = scope.$eval(attrs.deferTransition) || $q.when();
-        deferTransitionPromise.cancel = function() {
-          cancelled = true;  
-          //Undo display none from waiting for transition
-          dest.element.css('display', '');
-        };
-
-        var cancelled = false;
-        deferTransitionPromise.then(function() {
-          if (!cancelled) {
-            //Undo display none from waiting for transition
-            dest.element.css('display', '');
-            return doTransition();
+        var promise = $change(dest.element, (source ? source.element : null),
+          transition, reverse);
+
+        promise.then(function() {
+          if (source) {
+            $rootScope.$broadcast('$pageTransitionSuccess', dest, source);
+            source.scope.$destroy();
+            source.scope = undefined;
+            source.element.remove();
+            source.element = undefined;
+            source = undefined;
+            promise = null;
           }
         });
 
-        return deferTransitionPromise;
+        return promise;
       }
-      currentTrans && currentTrans.cancel();
-      currentTrans = changePage(dest, source, reverse);
+
+      //Set next element to display: none, then wait until transition is
+      //ready, then show it again.
+      dest.element.css('display', 'none');
+
+      //Allow a deferTransition expression, which is allowed to return a promise.
+      //The next page will be inserted, but not transitioned in until the promise
+      //is fulfilled.
+      var deferTransitionPromise = scope.$eval(attrs.deferTransition) || $q.when();
+
+      deferTransitionPromise.then(function() {
+        //Undo display none from waiting for transition
+        dest.element.css('display', '');
+        deferTransitionPromise = null;
+        return doTransition();
+      });
+    });
+
+    scope.$on('$destroy', function(){
+      transitionListener();
+      element.remove();
     });
   }
   return {