refactor(ngView): remove extra $watch, refactor one ugly test

angular · Apr 3, 2012 · 15c1fe3 · 15c1fe3
1 parent 428f2b5
commit 15c1fe3
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 39 deletions.
diff --git a/src/ng/directive/ngView.js b/src/ng/directive/ngView.js
@@ -115,42 +115,44 @@ var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$c
           lastScope,
           onloadExp = attr.onload || '';
 
-      scope.$on('$afterRouteChange', function(event, next, previous) {
-        changeCounter++;
-      });
+      scope.$on('$afterRouteChange', update);
+      update();
 
-      scope.$watch(function() {return changeCounter;}, function(newChangeCounter) {
-        var template = $route.current && $route.current.template;
 
-        function destroyLastScope() {
-          if (lastScope) {
-            lastScope.$destroy();
-            lastScope = null;
-          }
+      function destroyLastScope() {
+        if (lastScope) {
+          lastScope.$destroy();
+          lastScope = null;
         }
+      }
+
+      function update() {
+        var template = $route.current && $route.current.template,
+            thisChangeId = ++changeCounter;
 
         function clearContent() {
           // ignore callback if another route change occured since
-          if (newChangeCounter == changeCounter) {
+          if (thisChangeId === changeCounter) {
             element.html('');
+            destroyLastScope();
           }
-          destroyLastScope();
         }
 
         if (template) {
           $http.get(template, {cache: $templateCache}).success(function(response) {
             // ignore callback if another route change occured since
-            if (newChangeCounter == changeCounter) {
+            if (thisChangeId === changeCounter) {
               element.html(response);
               destroyLastScope();
 
               var link = $compile(element.contents()),
-                  current = $route.current;
+                  current = $route.current,
+                  controller;
 
               lastScope = current.scope = scope.$new();
               if (current.controller) {
-                element.contents().
-                  data('$ngControllerController', $controller(current.controller, {$scope: lastScope}));
+                controller = $controller(current.controller, {$scope: lastScope});
+                element.contents().data('$ngControllerController', controller);
               }
 
               link(lastScope);
@@ -164,7 +166,7 @@ var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$c
         } else {
           clearContent();
         }
-      });
+      }
     }
   };
 }];
diff --git a/test/ng/directive/ngViewSpec.js b/test/ng/directive/ngViewSpec.js
@@ -137,33 +137,29 @@ describe('ng-view', function() {
   });
 
 
-  it('should be possible to nest ng-view in ng-include', inject(function() {
-    // TODO(vojta): refactor this test
-    dealoc(element);
-    var injector = angular.injector(['ng', 'ngMock', function($routeProvider) {
-      $routeProvider.when('/foo', {controller: angular.noop, template: 'viewPartial.html'});
-    }]);
-    var myApp = injector.get('$rootScope');
-    var $httpBackend = injector.get('$httpBackend');
-    $httpBackend.expect('GET', 'includePartial.html').respond('view: <ng:view></ng:view>');
-    injector.get('$location').path('/foo');
+  it('should be possible to nest ng-view in ng-include', function() {
+
+    module(function($routeProvider) {
+      $routeProvider.when('/foo', {template: 'viewPartial.html'});
+    });
 
-    var $route = injector.get('$route');
+    inject(function($httpBackend, $location, $route, $compile, $rootScope) {
+      $httpBackend.whenGET('includePartial.html').respond('view: <ng:view></ng:view>');
+      $httpBackend.whenGET('viewPartial.html').respond('content');
+      $location.path('/foo');
 
-    element = injector.get('$compile')(
+      var elm = $compile(
         '<div>' +
           'include: <ng:include src="\'includePartial.html\'"> </ng:include>' +
-        '</div>')(myApp);
-    myApp.$apply();
-
-    $httpBackend.expect('GET', 'viewPartial.html').respond('content');
-    $httpBackend.flush();
+        '</div>')($rootScope);
+      $rootScope.$digest();
+      $httpBackend.flush();
 
-    expect(element.text()).toEqual('include: view: content');
-    expect($route.current.template).toEqual('viewPartial.html');
-    dealoc(myApp);
-    dealoc(element);
-  }));
+      expect(elm.text()).toEqual('include: view: content');
+      expect($route.current.template).toEqual('viewPartial.html');
+      dealoc(elm)
+    });
+  });
 
 
   it('should initialize view template after the view controller was initialized even when ' +