feat(service.$autoScroll): scroll to hash fragment

- whenever hash part of the url changes
- after ng:view / ng:include load

4 files changed, 75 insertions, 4 deletions

diff --git a/src/AngularPublic.js b/src/AngularPublic.js
index 66301104..6352df33 100644
--- a/src/AngularPublic.js
+++ b/src/AngularPublic.js
@@ -66,6 +66,7 @@ function ngModule($provide, $injector) {
     $provide.service('$locale', $LocaleProvider);
   });
 
+  $provide.service('$autoScroll', $AutoScrollProvider);
   $provide.service('$browser', $BrowserProvider);
   $provide.service('$compile', $CompileProvider);
   $provide.service('$cookies', $CookiesProvider);
diff --git a/src/service/autoScroll.js b/src/service/autoScroll.js
new file mode 100644
index 00000000..7b5b28e4
--- /dev/null
+++ b/src/service/autoScroll.js
@@ -0,0 +1,67 @@
+/**
+ * @ngdoc function
+ * @name angular.module.ng.$autoScroll
+ * @requires $window
+ * @requires $location
+ * @requires $rootScope
+ *
+ * @description
+ * When called, it checks current value of `$location.hash()` and scroll to related element,
+ * according to rules specified in
+ * {@link http://dev.w3.org/html5/spec/Overview.html#the-indicated-part-of-the-document Html5 spec}.
+ *
+ * If `$location` uses `hashbang` url (running in `hashbang` mode or `html5` mode on browser without
+ * history API support), `$autoScroll` watches the `$location.hash()` and scroll whenever it
+ * changes.
+ *
+ * You can disable `$autoScroll` service by calling `disable()` on `$autoScrollProvider`.
+ * Note: disabling is only possible before the service is instantiated !
+ */
+function $AutoScrollProvider() {
+
+  this.disable = function() {
+    this.$get = function() {return noop;};
+  };
+
+  this.$get = ['$window', '$location', '$rootScope', function($window, $location, $rootScope) {
+    var document = $window.document;
+
+    // helper function to get first anchor from a NodeList
+    // can't use filter.filter, as it accepts only instances of Array
+    // and IE can't convert NodeList to an array using [].slice
+    // TODO(vojta): use filter if we change it to accept lists as well
+    function getFirstAnchor(list) {
+      var result = null;
+      forEach(list, function(element) {
+        if (!result && lowercase(element.nodeName) === 'a') result = element;
+      });
+      return result;
+    }
+
+    function scroll() {
+      var hash = $location.hash(), elm;
+
+      // empty hash, scroll to the top of the page
+      if (!hash) $window.scrollTo(0, 0);
+
+      // element with given id
+      else if ((elm = document.getElementById(hash))) elm.scrollIntoView();
+
+      // first anchor with given name :-D
+      else if ((elm = getFirstAnchor(document.getElementsByName(hash)))) elm.scrollIntoView();
+
+      // no element and hash == 'top', scroll to the top of the page
+      else if (hash === 'top') $window.scrollTo(0, 0);
+    }
+
+    // scroll whenever hash changes (with hashbang url, regular urls are handled by browser)
+    if ($location instanceof LocationHashbangUrl) {
+      $rootScope.$watch(function() {return $location.hash();}, function() {
+        $rootScope.$evalAsync(scroll);
+      });
+    }
+
+    return scroll;
+  }];
+}
+
diff --git a/src/service/location.js b/src/service/location.js
index a29a1a15..f5928eb2 100644
--- a/src/service/location.js
+++ b/src/service/location.js
@@ -195,7 +195,7 @@ function LocationHashbangUrl(url, hashPrefix) {
 }
 
 
-LocationUrl.prototype = LocationHashbangUrl.prototype = {
+LocationUrl.prototype = {
 
   /**
    * Has any change been replacing ?
@@ -374,6 +374,7 @@ LocationUrl.prototype = LocationHashbangUrl.prototype = {
   }
 };
 
+LocationHashbangUrl.prototype = inherit(LocationUrl.prototype);
 
 function locationGetter(property) {
   return function() {
diff --git a/src/widgets.js b/src/widgets.js
index c4494b29..f6cdb977 100644
--- a/src/widgets.js
+++ b/src/widgets.js
@@ -90,7 +90,7 @@ angularWidget('ng:include', function(element){
     this.directives(true);
   } else {
     element[0]['ng:compiled'] = true;
-    return ['$xhr.cache', '$element', function(xhr, element){
+    return ['$xhr.cache', '$autoScroll', '$element', function($xhr, $autoScroll, element) {
       var scope = this,
           changeCounter = 0,
           releaseScopes = [],
@@ -114,7 +114,7 @@ angularWidget('ng:include', function(element){
           releaseScopes.pop().$destroy();
         }
         if (src) {
-          xhr('GET', src, null, function(code, response){
+          $xhr('GET', src, null, function(code, response) {
             element.html(response);
             if (useScope) {
               childScope = useScope;
@@ -122,6 +122,7 @@ angularWidget('ng:include', function(element){
               releaseScopes.push(childScope = scope.$new());
             }
             compiler.compile(element)(childScope);
+            $autoScroll();
             scope.$eval(onloadExp);
           }, false, true);
         } else {
@@ -555,7 +556,7 @@ angularWidget('ng:view', function(element) {
 
   if (!element[0]['ng:compiled']) {
     element[0]['ng:compiled'] = true;
-    return ['$xhr.cache', '$route', '$element', function($xhr, $route, element){
+    return ['$xhr.cache', '$route', '$autoScroll', '$element', function($xhr, $route, $autoScroll, element) {
       var template;
       var changeCounter = 0;
 
@@ -572,6 +573,7 @@ angularWidget('ng:view', function(element) {
             if (newChangeCounter == changeCounter) {
               element.html(response);
               compiler.compile(element)($route.current.scope);
+              $autoScroll();
             }
           });
         } else {