a segment with undefined template now works with view-segment tag's b…

…ody properly, so that you can inline a template right into top-level view
veerendrakumar-github · Aug 26, 2013 · c2ca74a · c2ca74a
1 parent 7d17472
commit c2ca74a
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 25 deletions.
diff --git a/example/app.js b/example/app.js
@@ -89,6 +89,7 @@ app.config(function($routeSegmentProvider, $routeProvider) {
         .when('/invalid-data', 's1.invalidData')
         .when('/slow-data', 's1.slowDataSimple')
         .when('/slow-data-loading', 's1.slowDataLoading')
+        .when('/inline-view', 's1.inlineParent.inlineChildren')
         .when('/section1/:id/slow',    's1.itemInfo.tabSlow')
 
         .within('s1')
@@ -133,6 +134,23 @@ app.config(function($routeSegmentProvider, $routeProvider) {
                     templateUrl: 'templates/loading.html'
                 }
             })
+            .segment('inlineParent', {
+                templateUrl: 'templates/section1/inline-view.html'
+            })
+            .within()
+                .segment('inlineChildren', {
+                    // no template here
+                    controller: 'SlowDataCtrl',
+                    resolve: {
+                        data: function($timeout) {
+                            return $timeout(function() { return 'SLOW DATA CONTENT'; }, 2000);
+                        }
+                    },
+                    untilResolved: {
+                        templateUrl: 'templates/loading.html'
+                    }
+                })
+                .up()
 
             .within('itemInfo')
                 .segment('tabSlow', {

diff --git a/example/templates/section1.html b/example/templates/section1.html
@@ -37,6 +37,10 @@
                 <li ng-class="{active: $routeSegment.startsWith('s1.slowDataLoading')}">
                     <a href="#/slow-data-loading">With `untilResolved`</a>
                 </li>
+
+                <li ng-class="{active: $routeSegment.startsWith('s1.inlineView')}">
+                    <a href="#/inline-view">Inline view</a>
+                </li>
 
                 <li class="divider"></li>
 

diff --git a/example/templates/section1/inline-view.html b/example/templates/section1/inline-view.html
@@ -0,0 +1,8 @@
+<p>The HTML template of a view below is inlined right in the top-level view.</p>
+
+<div app-view-segment="2" class="well">
+    <div class="">
+        <h4>Slow data is loaded:</h4>
+        <pre>{{data}}</pre>
+    </div>
+</div>
diff --git a/src/view-segment.js b/src/view-segment.js
@@ -83,32 +83,27 @@
                             var locals = angular.extend({}, segment.locals),
                             template = locals && locals.$template;
 
-                            if (template) {
-
-                                clearContent();
-
-                                currentElement = tElement.clone();
-                                currentElement.html(template);
-                                animate.enter( currentElement, null, anchor );
-
-                                var link = $compile(currentElement, false, 499), controller;
-
-                                currentScope = $scope.$new();
-                                if (segment.params.controller) {
-                                    locals.$scope = currentScope;
-                                    controller = $controller(segment.params.controller, locals);
-                                    if(segment.params.controllerAs)
-                                        currentScope[segment.params.controllerAs] = controller;
-                                    currentElement.data('$ngControllerController', controller);
-                                    currentElement.children().data('$ngControllerController', controller);
-                                }
-
-                                link(currentScope);
-                                currentScope.$emit('$viewContentLoaded');
-                                currentScope.$eval(onloadExp);
-                            } else {
-                                clearContent();
+                            clearContent();
+
+                            currentElement = tElement.clone();
+                            currentElement.html(template ? template : defaultContent);
+                            animate.enter( currentElement, null, anchor );
+
+                            var link = $compile(currentElement, false, 499), controller;
+
+                            currentScope = $scope.$new();
+                            if (segment.params.controller) {
+                                locals.$scope = currentScope;
+                                controller = $controller(segment.params.controller, locals);
+                                if(segment.params.controllerAs)
+                                    currentScope[segment.params.controllerAs] = controller;
+                                currentElement.data('$ngControllerController', controller);
+                                currentElement.children().data('$ngControllerController', controller);
                             }
+
+                            link(currentScope);
+                            currentScope.$emit('$viewContentLoaded');
+                            currentScope.$eval(onloadExp);
                         }
                     }
                 }

diff --git a/test/unit/view-segment.spec.js b/test/unit/view-segment.spec.js
@@ -230,6 +230,66 @@ describe('view-segment', function() {
         $rootScope.$digest();
         expect(spy.calls.length).toBe(2);
     }))
+
+    describe('a view with empty template', function() {
+
+        beforeEach(function() {
+
+            $rootScope.foo = 'INIT';
+
+            $routeSegmentProvider.when('/3', 'section3');
+            $routeSegmentProvider.when('/3/1/:id', 'section3.section31');
+            $routeSegmentProvider.segment('section3', {
+                template: '<div app:view-segment="1"><div>{{foo}}</div></div>'
+            })
+            $routeSegmentProvider.within('section3').segment('section31', {
+                // no template
+                controller: function($scope) {
+                    $scope.foo = 'CONTROLLER OVERRIDDEN '+$routeSegment.$routeParams.id;
+                },
+                dependencies: ['id']
+            });
+        })
+
+        it('should work with tag\'s content', function() {
+
+            $location.path('/3');
+
+            $rootScope.$digest();
+            expect(elm.find('> div').text()).toBe('INIT');
+
+            $location.path('/3/1/1');
+
+            $rootScope.$digest();
+            expect(elm.find('> div').text()).toBe('CONTROLLER OVERRIDDEN 1');
+
+            $location.path('/3/1/2');
+
+            $rootScope.$digest();
+            expect(elm.find('> div').text()).toBe('CONTROLLER OVERRIDDEN 2');
+        })
+
+        it('should reload', function() {
+
+            $location.path('/3/1/1');
+
+            $rootScope.$digest();
+            expect(elm.find('> div').text()).toBe('CONTROLLER OVERRIDDEN 1');
+
+            elm.find('> div > div').scope().foo = 'DIRTY';
+
+            $rootScope.$digest();
+            expect(elm.find('> div').text()).toBe('DIRTY');
+
+            $routeSegment.chain[1].reload();
+
+            $rootScope.$digest();
+            expect(elm.find('> div').text()).toBe('CONTROLLER OVERRIDDEN 1');
+        })
+
+    })
+
+
 
 
 });