fix(): allow to be included in an asynchronously loaded template

Author: petebacondarwin

src/ngRoute/route.js

@@ -25,16 +25,17 @@ var isObject;
  /* global -ngRouteModule */
 var ngRouteModule = angular.module('ngRoute', ['ng'])
                         .provider('$route', $RouteProvider)
-                        .factory('$$trackLocationChanges', ['$rootScope', $$trackLocationChanges])
+                        .factory('$$trackLocationChanges', ['$rootScope', '$location', $$trackLocationChanges])
                         .run(['$$trackLocationChanges', function($$trackLocationChanges) {
                           $$trackLocationChanges.start();
                         }]),
 
     $routeMinErr = angular.$$minErr('ngRoute');
 
-function $$trackLocationChanges($rootScope) {
+function $$trackLocationChanges($rootScope, $location) {
   var removeStartHandler, removeSuccessHandler;
   var service = {
+    events: [],
     start: function() {
       removeStartHandler = $rootScope.$on('$locationChangeStart', storeStartEvent);
       removeSuccessHandler = $rootScope.$on('$locationChangeSuccess', storeSuccessEvent);
@@ -47,13 +48,12 @@ function $$trackLocationChanges($rootScope) {
 
   return service;
 
-  function storeStartEvent(e) {
-    service.startEvent = e;
-    delete service.successEvent;
+  function storeStartEvent(e, url) {
+    service.events.push({ startEvent: e, locationPath: $location.path(), locationSearch: $location.search() });
   }
 
   function storeSuccessEvent(e) {
-    service.successEvent = e;
+    service.events[service.events.length-1].successEvent = e;
   }
 }
 
@@ -557,7 +557,7 @@ function $RouteProvider() {
             };
 
             $rootScope.$evalAsync(function() {
-              prepareRoute(fakeLocationEvent);
+              prepareRoute(fakeLocationEvent, $location.path(), $location.search());
               if (!fakeLocationEvent.defaultPrevented) commitRoute();
             });
           },
@@ -587,13 +587,22 @@ function $RouteProvider() {
           }
         };
 
-    if ($$trackLocationChanges.successEvent) {
-      prepareRoute($$trackLocationChanges.startEvent);
-      commitRoute($$trackLocationChanges.successEvent);
+    var eventPair;
+    while(eventPair = $$trackLocationChanges.events.pop()) {
+      // find the most recent success event
+      if (eventPair.successEvent) {
+        prepareRoute(eventPair.startEvent, eventPair.locationPath, eventPair.locationSearch);
+        // if the start event is not prevented then commit the change and escape
+        // otherwise try the previous location change
+        if (!eventPair.startEvent.defaultPrevented) {
+          commitRoute(eventPair.successEvent);
+          break;
+        }
+      }
     }
     $$trackLocationChanges.stop();
 
-    $rootScope.$on('$locationChangeStart', prepareRoute);
+    $rootScope.$on('$locationChangeStart', function(e) { return prepareRoute(e, $location.path(), $location.search()); });
     $rootScope.$on('$locationChangeSuccess', commitRoute);
 
     return $route;
@@ -632,10 +641,10 @@ function $RouteProvider() {
       return params;
     }
 
-    function prepareRoute($locationEvent) {
+    function prepareRoute($locationEvent, locationPath, locationSearch) {
       var lastRoute = $route.current;
 
-      preparedRoute = parseRoute();
+      preparedRoute = parseRoute(locationPath, locationSearch);
       preparedRouteIsUpdateOnly = preparedRoute && lastRoute && preparedRoute.$$route === lastRoute.$$route
           && angular.equals(preparedRoute.pathParams, lastRoute.pathParams)
           && !preparedRoute.reloadOnSearch && !forceReload;
@@ -795,13 +804,13 @@ function $RouteProvider() {
     /**
      * @returns {Object} the current active route, by matching it against the URL
      */
-    function parseRoute() {
+    function parseRoute(locationPath, locationSearch) {
       // Match a route
       var params, match;
       angular.forEach(routes, function(route, path) {
-        if (!match && (params = switchRouteMatcher($location.path(), route))) {
+        if (!match && (params = switchRouteMatcher(locationPath, route))) {
           match = inherit(route, {
-            params: angular.extend({}, $location.search(), params),
+            params: angular.extend({}, locationSearch, params),
             pathParams: params});
           match.$$route = route;
         }

test/ngRoute/directive/ngViewSpec.js

@@ -696,6 +696,7 @@ describe('ngView', function() {
   });
 
   describe('ngView in async template', function() {
+
     beforeEach(module('ngRoute'));
     beforeEach(module(function($compileProvider, $provide, $routeProvider) {
       $compileProvider.directive('asyncView', function() {
@@ -709,22 +710,106 @@ describe('ngView', function() {
       });
 
       $routeProvider.when('/', {template: 'Hello, world!'});
+      $routeProvider.when('/one', {template: 'One'});
+      $routeProvider.when('/two', {template: 'Two'});
     }));
 
 
     it('should work correctly upon initial page load',
       // Injecting `$location` here is necessary, so that it gets instantiated early
       inject(function($compile, $location, $rootScope, $timeout) {
         var elem = $compile('<async-view></async-view>')($rootScope);
+
         $rootScope.$digest();
-        $timeout.flush(500);
+        expect(elem.text()).toBe('');
 
+        $timeout.flush(500);
         expect(elem.text()).toBe('Hello, world!');
 
         dealoc(elem);
       })
     );
-  });
+
+    it('should cope with multiple location changes before the template arrives', function() {
+      inject(function($compile, $location, $rootScope, $timeout) {
+        var elem = $compile('<async-view></async-view>')($rootScope);
+
+        $rootScope.$digest();
+        expect(elem.text()).toBe('');
+
+        $location.path('one');
+        $rootScope.$digest();
+        expect(elem.text()).toBe('');
+
+        $location.path('two');
+        $rootScope.$digest();
+        expect(elem.text()).toBe('');
+
+        $timeout.flush(500);
+        expect(elem.text()).toBe('Two');
+
+        dealoc(elem);
+      });
+    });
+
+    it('should use the previous location change if the latest is prevented via $location event', function() {
+      inject(function($compile, $location, $rootScope, $timeout) {
+        var preventDefault;
+
+        $rootScope.$on('$locationChangeStart', function(e) {
+          if (preventDefault) e.preventDefault();
+        });
+
+        var elem = $compile('<async-view></async-view>')($rootScope);
+
+        $rootScope.$digest();
+        expect(elem.text()).toBe('');
+
+        preventDefault = false;
+        $location.path('one');
+        $rootScope.$digest();
+        expect(elem.text()).toBe('');
+
+
+        preventDefault = true;
+        $location.path('two');
+        $rootScope.$digest();
+        expect(elem.text()).toBe('');
+
+        $timeout.flush(500);
+        expect(elem.text()).toBe('One');
+
+        dealoc(elem);
+      });
+    });
+
+    it('should use the previous location change if the latest is prevented via $route event', function() {
+      inject(function($compile, $location, $rootScope, $timeout) {
+
+        $rootScope.$on('$routeChangeStart', function(e, next, current) {
+  	      if (next.$$route.originalPath == '/two') e.preventDefault();
+        });
+
+        var elem = $compile('<async-view></async-view>')($rootScope);
+
+        $rootScope.$digest();
+        expect(elem.text()).toBe('');
+
+        $location.path('one');
+        $rootScope.$digest();
+        expect(elem.text()).toBe('');
+
+
+        $location.path('two');
+        $rootScope.$digest();
+        expect(elem.text()).toBe('');
+
+        $timeout.flush(500);
+        expect(elem.text()).toBe('One');
+
+        dealoc(elem);
+      });
+    });  });
 
   describe('animations', function() {
     var body, element, $rootElement;