refactor($autoScroll): rename to $anchorScroll and allow disabling auto scrolling (links)

Now, that we have autoscroll attribute on ng:include, there is no reason to disable the service completely, so $anchorScrollProvider.disableAutoScrolling() means it won't be scrolling when $location.hash() changes.

And then, it's not $autoScroll at all, it actually scrolls to anchor when it's called, so I renamed
it to $anchorScroll.
This commit is contained in:
Vojta Jina 2012-01-12 03:00:34 -08:00
parent 985d3d7558
commit 15fd735793
6 changed files with 41 additions and 49 deletions

2
angularFiles.js vendored
View file

@ -9,7 +9,7 @@ angularFiles = {
'src/sanitizer.js',
'src/jqLite.js',
'src/apis.js',
'src/service/autoScroll.js',
'src/service/anchorScroll.js',
'src/service/browser.js',
'src/service/cacheFactory.js',
'src/service/compiler.js',

View file

@ -66,7 +66,7 @@ function publishExternalAPI(angular){
$provide.value('$directive', angularDirective);
$provide.value('$widget', angularWidget);
$provide.service('$autoScroll', $AutoScrollProvider);
$provide.service('$anchorScroll', $AnchorScrollProvider);
$provide.service('$browser', $BrowserProvider);
$provide.service('$cacheFactory', $CacheFactoryProvider);
$provide.service('$compile', $CompileProvider);

View file

@ -1,6 +1,6 @@
/**
* @ngdoc function
* @name angular.module.ng.$autoScroll
* @name angular.module.ng.$anchorScroll
* @requires $window
* @requires $location
* @requires $rootScope
@ -11,14 +11,14 @@
* {@link http://dev.w3.org/html5/spec/Overview.html#the-indicated-part-of-the-document Html5 spec}.
*
* It also watches the `$location.hash()` and scroll whenever it changes to match any anchor.
*
* You can disable `$autoScroll` service by calling `disable()` on `$autoScrollProvider`.
* Note: disabling is only possible before the service is instantiated !
* This can be disabled by calling `$anchorScrollProvider.disableAutoScrolling()`.
*/
function $AutoScrollProvider() {
function $AnchorScrollProvider() {
this.disable = function() {
this.$get = function() {return noop;};
var autoScrollingEnabled = true;
this.disableAutoScrolling = function() {
autoScrollingEnabled = false;
};
this.$get = ['$window', '$location', '$rootScope', function($window, $location, $rootScope) {
@ -54,9 +54,11 @@ function $AutoScrollProvider() {
// does not scroll when user clicks on anchor link that is currently on
// (no url change, no $locaiton.hash() change), browser native does scroll
$rootScope.$watch(function() {return $location.hash();}, function() {
$rootScope.$evalAsync(scroll);
});
if (autoScrollingEnabled) {
$rootScope.$watch(function() {return $location.hash();}, function() {
$rootScope.$evalAsync(scroll);
});
}
return scroll;
}];

View file

@ -43,8 +43,8 @@
* instance of angular.module.ng.$rootScope.Scope to set the HTML fragment to.
* @param {string=} onload Expression to evaluate when a new partial is loaded.
*
* @param {string=} autoscroll Whether `ng:include` should call {@link angular.module.ng.$autoScroll
* $autoScroll} to scroll the viewport after the content is loaded.
* @param {string=} autoscroll Whether `ng:include` should call {@link angular.module.ng.$anchorScroll
* $anchorScroll} to scroll the viewport after the content is loaded.
*
* - If the attribute is not set, disable scrolling.
* - If the attribute is set without value, enable scrolling.
@ -99,8 +99,8 @@ angularWidget('ng:include', function(element){
this.directives(true);
} else {
element[0]['ng:compiled'] = true;
return ['$http', '$templateCache', '$autoScroll', '$element',
function($http, $templateCache, $autoScroll, element) {
return ['$http', '$templateCache', '$anchorScroll', '$element',
function($http, $templateCache, $anchorScroll, element) {
var scope = this,
changeCounter = 0,
childScope;
@ -133,7 +133,7 @@ angularWidget('ng:include', function(element){
childScope = useScope ? useScope : scope.$new();
compiler.compile(element)(childScope);
if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) {
$autoScroll();
$anchorScroll();
}
scope.$eval(onloadExp);
}
@ -568,8 +568,8 @@ angularWidget('ng:view', function(element) {
if (!element[0]['ng:compiled']) {
element[0]['ng:compiled'] = true;
return ['$http', '$templateCache', '$route', '$autoScroll', '$element',
function($http, $templateCache, $route, $autoScroll, element) {
return ['$http', '$templateCache', '$route', '$anchorScroll', '$element',
function($http, $templateCache, $route, $anchorScroll, element) {
var template;
var changeCounter = 0;
@ -593,7 +593,7 @@ angularWidget('ng:view', function(element) {
if (newChangeCounter == changeCounter) {
element.html(response);
compiler.compile(element)($route.current.scope);
$autoScroll();
$anchorScroll();
}
}).error(clearContent);
} else {

View file

@ -1,4 +1,4 @@
describe('$autoScroll', function() {
describe('$anchorScroll', function() {
var elmSpy;
@ -18,9 +18,9 @@ describe('$autoScroll', function() {
}
function changeHashAndScroll(hash) {
return function($location, $autoScroll) {
return function($location, $anchorScroll) {
$location.hash(hash);
$autoScroll();
$anchorScroll();
};
}
@ -46,12 +46,6 @@ describe('$autoScroll', function() {
return expectScrollingTo(NaN);
}
function disableScroller() {
return function($autoScrollProvider) {
$autoScrollProvider.disable();
};
}
beforeEach(module(function($provide) {
elmSpy = {};
@ -108,16 +102,6 @@ describe('$autoScroll', function() {
expectScrollingTo('id=top')));
it('should not scroll when disabled', function() {
module(disableScroller());
inject(
addElements('id=fake', 'a name=fake', 'input name=fake'),
changeHashAndScroll('fake'),
expectNoScrolling()
);
});
describe('watcher', function() {
function initLocation(config) {
@ -128,13 +112,19 @@ describe('$autoScroll', function() {
}
function changeHashTo(hash) {
return function ($location, $rootScope, $autoScroll) {
return function ($location, $rootScope, $anchorScroll) {
$rootScope.$apply(function() {
$location.hash(hash);
});
};
}
function disableAutoScrolling() {
return function($anchorScrollProvider) {
$anchorScrollProvider.disableAutoScrolling();
};
}
afterEach(inject(function($document) {
dealoc($document);
}));
@ -182,7 +172,7 @@ describe('$autoScroll', function() {
it('should not scroll when disabled', function() {
module(
disableScroller(),
disableAutoScrolling(),
initLocation({html5Mode: false, historyApi: false})
);
inject(

View file

@ -225,10 +225,10 @@ describe('widget', function() {
describe('autoscoll', function() {
var autoScrollSpy;
function spyOnAutoScroll() {
function spyOnAnchorScroll() {
return function($provide) {
autoScrollSpy = jasmine.createSpy('$autoScroll');
$provide.value('$autoScroll', autoScrollSpy);
autoScrollSpy = jasmine.createSpy('$anchorScroll');
$provide.value('$anchorScroll', autoScrollSpy);
};
}
@ -247,20 +247,20 @@ describe('widget', function() {
};
}
beforeEach(module(spyOnAutoScroll()));
beforeEach(module(spyOnAnchorScroll()));
beforeEach(inject(
putIntoCache('template.html', 'CONTENT'),
putIntoCache('another.html', 'CONTENT')));
it('should call $autoScroll if autoscroll attribute is present', inject(
it('should call $anchorScroll if autoscroll attribute is present', inject(
compileAndLink('<ng:include src="tpl" autoscroll></ng:include>'),
changeTplAndValueTo('template.html'), function() {
expect(autoScrollSpy).toHaveBeenCalledOnce();
}));
it('should call $autoScroll if autoscroll evaluates to true', inject(
it('should call $anchorScroll if autoscroll evaluates to true', inject(
compileAndLink('<ng:include src="tpl" autoscroll="value"></ng:include>'),
changeTplAndValueTo('template.html', true),
changeTplAndValueTo('another.html', 'some-string'),
@ -270,14 +270,14 @@ describe('widget', function() {
}));
it('should not call $autoScroll if autoscroll attribute is not present', inject(
it('should not call $anchorScroll if autoscroll attribute is not present', inject(
compileAndLink('<ng:include src="tpl"></ng:include>'),
changeTplAndValueTo('template.html'), function() {
expect(autoScrollSpy).not.toHaveBeenCalled();
}));
it('should not call $autoScroll if autoscroll evaluates to false', inject(
it('should not call $anchorScroll if autoscroll evaluates to false', inject(
compileAndLink('<ng:include src="tpl" autoscroll="value"></ng:include>'),
changeTplAndValueTo('template.html', false),
changeTplAndValueTo('template.html', undefined),