diff --git a/src/directive/ngView.js b/src/directive/ngView.js index d5b24bcb893b..1389f521985a 100644 --- a/src/directive/ngView.js +++ b/src/directive/ngView.js @@ -13,6 +13,11 @@ * configuration of the `$route` service. * * @scope + * + * @param {string=} template Specify the name of the property in the route object containing the source of + * the template to load. By default, ng-view will look for a property named 'template' + * in the current route. Use this property to use more than one ng-view on the same page. + * * @example @@ -113,15 +118,16 @@ var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$c link: function(scope, element, attr) { var changeCounter = 0, lastScope, - onloadExp = attr.onload || ''; + onloadExp = attr.onload || '', + templateProp = attr.template || 'template'; scope.$on('$afterRouteChange', function(event, next, previous) { changeCounter++; }); scope.$watch(function() {return changeCounter;}, function(newChangeCounter) { - var template = $route.current && $route.current.template; - + var template = $route.current && $route.current[templateProp]; + function destroyLastScope() { if (lastScope) { lastScope.$destroy(); diff --git a/test/directive/ngViewSpec.js b/test/directive/ngViewSpec.js index 2a4347a0fd1e..2bef18f29088 100644 --- a/test/directive/ngViewSpec.js +++ b/test/directive/ngViewSpec.js @@ -411,3 +411,95 @@ describe('ng-view', function() { }); }) }); + +describe('ng-view with configurable template', function() { + var element; + + beforeEach(module(function() { + return function($rootScope, $compile) { + element = $compile('')($rootScope); + }; + })); + + afterEach(function(){ + dealoc(element); + }); + + it('should use the configured template', function() { + module(function($routeProvider) { + $routeProvider.when('/route1234', {template: 'myUrl1', template2: 'myUrl2'}); + }); + + inject(function($rootScope, $compile, $httpBackend, $location, $route) { + expect(element.text()).toEqual(''); + + $location.path('/route1234'); + $httpBackend.expect('GET', 'myUrl2').respond('
{{1+3}}
'); + $rootScope.$digest(); + $httpBackend.flush(); + expect(element.text()).toEqual('4'); + }); + }); +}); + +describe('ng-view twice on the same page', function() { + var element; + + beforeEach(module(function() { + return function($rootScope, $compile) { + element = $compile('
_
')($rootScope); + }; + })); + + afterEach(function(){ + dealoc(element); + }); + + it('should render both views', function() { + module(function($routeProvider) { + $routeProvider.when('/route1234', {t1: 'page1', t2: 'page2'}); + }); + + inject(function($rootScope, $compile, $httpBackend, $location, $route) { + expect(element.text()).toEqual('_'); + + $location.path('/route1234'); + $httpBackend.expect('GET', 'page1').respond('
{{10+1}}
'); + $httpBackend.expect('GET', 'page2').respond('
{{10+2}}
'); + $rootScope.$digest(); + $httpBackend.flush(); + expect(element.text()).toEqual('11_12'); + }); + }); +}); + +describe('ng-view nested', function() { + var element; + + beforeEach(module(function() { + return function($rootScope, $compile) { + element = $compile('')($rootScope); + }; + })); + + afterEach(function(){ + dealoc(element); + }); + + it('should render nested views', function() { + module(function($routeProvider) { + $routeProvider.when('/route1234', {layout: 'layout1', content: 'content1'}); + }); + + inject(function($rootScope, $compile, $httpBackend, $location, $route) { + expect(element.text()).toEqual(''); + + $location.path('/route1234'); + $httpBackend.expect('GET', 'layout1').respond('layout:'); + $httpBackend.expect('GET', 'content1').respond('content'); + $rootScope.$digest(); + $httpBackend.flush(); + expect(element.text()).toEqual('layout:content'); + }); + }); +});