refactor(ng:view) Make $route scope agnostic, add $contentLoaded event

Problems:

- controller was instantiated immediately on $afterRouteChange (even if no content), that's
different compare to ng:controller, which instantiates controllers after compiling
- route listened on current scope ($afterRouteChange), so if you were listening on $rootScope
($afterRouteChange), you get called first and current.scope === undefined, which is flaky
- route handles scope destroying, but scope is created by ng:view
- route fires after/before route change even if there is no route (when no otherwise specified)

Solution:

- route has no idea about scope, whole scope business moved to ng:view (creating/destroying)
- scope is created (and controller instantiated) AFTER compiling the content
- that means on $afterRouteChange - there is no scope yet (current.scope === undefined)
- added $contentLoaded event fired by ng:view, after linking the content

Author: vojtajina

Diff for: src/service/route.js

@@ -237,22 +237,16 @@ function $RouteProvider(){
 
     function updateRoute() {
       var next = parseRoute(),
-          last = $route.current,
-          Controller;
+          last = $route.current;
 
       if (next && last && next.$route === last.$route
           && equals(next.pathParams, last.pathParams) && !next.reloadOnSearch && !forceReload) {
-        next.scope = last.scope;
-        $route.current = next;
-        copy(next.params, $routeParams);
-        last.scope && last.scope.$emit('$routeUpdate');
-      } else {
+        last.params = next.params;
+        copy(last.params, $routeParams);
+        $rootScope.$broadcast('$routeUpdate', last);
+      } else if (next || last) {
         forceReload = false;
         $rootScope.$broadcast('$beforeRouteChange', next, last);
-        if (last && last.scope) {
-          last.scope.$destroy();
-          last.scope = null;
-        }
         $route.current = next;
         if (next) {
           if (next.redirectTo) {
@@ -308,7 +302,5 @@ function $RouteProvider(){
       });
       return result.join('');
     }
-
-
   }];
 }

Diff for: src/widgets.js

@@ -544,46 +544,57 @@ var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$c
   return {
     terminal: true,
     link: function(scope, element) {
-      var changeCounter = 0;
+      var changeCounter = 0,
+          lastScope;
 
-      processRoute($route.current);
-      scope.$on('$afterRouteChange', function(event, next) {
+      scope.$on('$afterRouteChange', function(event, next, previous) {
         changeCounter++;
-        processRoute(next);
       });
 
       scope.$watch(function() {return changeCounter;}, function(newChangeCounter) {
         var template = $route.current && $route.current.template;
 
+        function destroyLastScope() {
+          if (lastScope) {
+            lastScope.$destroy();
+            lastScope = null;
+          }
+        }
+
         function clearContent() {
           // ignore callback if another route change occured since
           if (newChangeCounter == changeCounter) {
             element.html('');
           }
+          destroyLastScope();
         }
 
         if (template) {
           $http.get(template, {cache: $templateCache}).success(function(response) {
             // ignore callback if another route change occured since
             if (newChangeCounter == changeCounter) {
               element.html(response);
-              $compile(element.contents())($route.current.scope);
+              destroyLastScope();
+
+              var link = $compile(element.contents()),
+                  current = $route.current;
+
+              lastScope = current.scope = scope.$new();
+              if (current.controller) {
+                $controller(current.controller, {$scope: lastScope});
+              }
+
+              link(lastScope);
+              lastScope.$emit('$contentLoaded');
+
+              // $anchorScroll might listen on event...
               $anchorScroll();
             }
           }).error(clearContent);
         } else {
           clearContent();
         }
       });
-
-      function processRoute(route) {
-        if (route) {
-          route.scope = scope.$new();
-          if (route.controller) {
-            $controller(route.controller, {$scope: route.scope});
-          }
-        }
-      }
     }
   };
 }];