feat(ng-view): support multiple ng-view on the same page and nested ng-view

stephanebisson · stephanebisson · commit 301cc9bdacc9 · 2012-08-25T15:41:33.000+08:00
diff --git 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
     <doc:example module="ngView">
       <doc:source>
@@ -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
@@ -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('<ng:view template="template2"></ng:view>')($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('<div>{{1+3}}</div>');
+      $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('<div><div id="view1"><ng:view template="t1"></ng:view></div>_<div id="view2"><ng:view template="t2"></ng:view></div></div>')($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('<div>{{10+1}}</div>');
+      $httpBackend.expect('GET', 'page2').respond('<div>{{10+2}}</div>');
+      $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('<ng:view template="layout"></ng:view>')($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:<ng-view template="content"></ng-view>');
+      $httpBackend.expect('GET', 'content1').respond('content');
+      $rootScope.$digest();
+      $httpBackend.flush();
+      expect(element.text()).toEqual('layout:content');
+    });
+  });
+});
