diff --git a/src/ng/route.js b/src/ng/route.js index f488ebf44324..0cf952139d11 100644 --- a/src/ng/route.js +++ b/src/ng/route.js @@ -420,7 +420,15 @@ function $RouteProvider(){ if (!match && (params = matcher($location.path(), path))) { match = inherit(route, { params: extend({}, $location.search(), params), - pathParams: params}); + pathParams: params + }); + if ((route.templateUrl) && (/:/.test(route.templateUrl))) { + match.templateUrl = interpolate(route.templateUrl,params); + } + //remove cached template if params were substituted (rely on browser cache) + if (match.templateUrl != route.templateUrl) { + match.template = undefined; + } match.$route = route; } }); diff --git a/test/ng/routeSpec.js b/test/ng/routeSpec.js index 31d932f72366..44466c034fb4 100644 --- a/test/ng/routeSpec.js +++ b/test/ng/routeSpec.js @@ -318,6 +318,33 @@ describe('$route', function() { }); }); + it('should interpolate parameters into the url of fetched templates',function(){ + module(function($routeProvider) { + $routeProvider. + when('/foo/:rparam',{templateUrl:':rparam.html'}); + }); + + inject(function($route, $httpBackend, $location, $rootScope) { + var log = ''; + $rootScope.$on('$routeChangeStart', function(e, next) { log += '$before(' + next.templateUrl + ');'}); + $rootScope.$on('$routeChangeSuccess', function(e, next) { log += '$after(' + next.templateUrl + ');'}); + + $httpBackend.expectGET('r1.html').respond('R1'); + $httpBackend.expectGET('r2.html').respond('R2'); + + $location.path('/foo/r1'); + $rootScope.$digest(); + expect(log).toBe('$before(r1.html);'); + + $location.path('/foo/r2'); + $rootScope.$digest(); + expect(log).toBe('$before(r1.html);$before(r2.html);'); + + $httpBackend.flush(); + expect(log).toBe('$before(r1.html);$before(r2.html);$after(r2.html);'); + expect(log).not.toContain('$after(r1.html);'); + }); + }); it('should not update $routeParams until $routeChangeSuccess', function() { module(function($routeProvider) {