mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-05-17 03:01:06 +00:00
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:
parent
985d3d7558
commit
15fd735793
6 changed files with 41 additions and 49 deletions
2
angularFiles.js
vendored
2
angularFiles.js
vendored
|
|
@ -9,7 +9,7 @@ angularFiles = {
|
||||||
'src/sanitizer.js',
|
'src/sanitizer.js',
|
||||||
'src/jqLite.js',
|
'src/jqLite.js',
|
||||||
'src/apis.js',
|
'src/apis.js',
|
||||||
'src/service/autoScroll.js',
|
'src/service/anchorScroll.js',
|
||||||
'src/service/browser.js',
|
'src/service/browser.js',
|
||||||
'src/service/cacheFactory.js',
|
'src/service/cacheFactory.js',
|
||||||
'src/service/compiler.js',
|
'src/service/compiler.js',
|
||||||
|
|
|
||||||
|
|
@ -66,7 +66,7 @@ function publishExternalAPI(angular){
|
||||||
$provide.value('$directive', angularDirective);
|
$provide.value('$directive', angularDirective);
|
||||||
$provide.value('$widget', angularWidget);
|
$provide.value('$widget', angularWidget);
|
||||||
|
|
||||||
$provide.service('$autoScroll', $AutoScrollProvider);
|
$provide.service('$anchorScroll', $AnchorScrollProvider);
|
||||||
$provide.service('$browser', $BrowserProvider);
|
$provide.service('$browser', $BrowserProvider);
|
||||||
$provide.service('$cacheFactory', $CacheFactoryProvider);
|
$provide.service('$cacheFactory', $CacheFactoryProvider);
|
||||||
$provide.service('$compile', $CompileProvider);
|
$provide.service('$compile', $CompileProvider);
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
/**
|
/**
|
||||||
* @ngdoc function
|
* @ngdoc function
|
||||||
* @name angular.module.ng.$autoScroll
|
* @name angular.module.ng.$anchorScroll
|
||||||
* @requires $window
|
* @requires $window
|
||||||
* @requires $location
|
* @requires $location
|
||||||
* @requires $rootScope
|
* @requires $rootScope
|
||||||
|
|
@ -11,14 +11,14 @@
|
||||||
* {@link http://dev.w3.org/html5/spec/Overview.html#the-indicated-part-of-the-document Html5 spec}.
|
* {@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.
|
* It also watches the `$location.hash()` and scroll whenever it changes to match any anchor.
|
||||||
*
|
* This can be disabled by calling `$anchorScrollProvider.disableAutoScrolling()`.
|
||||||
* You can disable `$autoScroll` service by calling `disable()` on `$autoScrollProvider`.
|
|
||||||
* Note: disabling is only possible before the service is instantiated !
|
|
||||||
*/
|
*/
|
||||||
function $AutoScrollProvider() {
|
function $AnchorScrollProvider() {
|
||||||
|
|
||||||
this.disable = function() {
|
var autoScrollingEnabled = true;
|
||||||
this.$get = function() {return noop;};
|
|
||||||
|
this.disableAutoScrolling = function() {
|
||||||
|
autoScrollingEnabled = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
this.$get = ['$window', '$location', '$rootScope', function($window, $location, $rootScope) {
|
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
|
// does not scroll when user clicks on anchor link that is currently on
|
||||||
// (no url change, no $locaiton.hash() change), browser native does scroll
|
// (no url change, no $locaiton.hash() change), browser native does scroll
|
||||||
$rootScope.$watch(function() {return $location.hash();}, function() {
|
if (autoScrollingEnabled) {
|
||||||
$rootScope.$evalAsync(scroll);
|
$rootScope.$watch(function() {return $location.hash();}, function() {
|
||||||
});
|
$rootScope.$evalAsync(scroll);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return scroll;
|
return scroll;
|
||||||
}];
|
}];
|
||||||
|
|
@ -43,8 +43,8 @@
|
||||||
* instance of angular.module.ng.$rootScope.Scope to set the HTML fragment to.
|
* 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=} onload Expression to evaluate when a new partial is loaded.
|
||||||
*
|
*
|
||||||
* @param {string=} autoscroll Whether `ng:include` should call {@link angular.module.ng.$autoScroll
|
* @param {string=} autoscroll Whether `ng:include` should call {@link angular.module.ng.$anchorScroll
|
||||||
* $autoScroll} to scroll the viewport after the content is loaded.
|
* $anchorScroll} to scroll the viewport after the content is loaded.
|
||||||
*
|
*
|
||||||
* - If the attribute is not set, disable scrolling.
|
* - If the attribute is not set, disable scrolling.
|
||||||
* - If the attribute is set without value, enable scrolling.
|
* - If the attribute is set without value, enable scrolling.
|
||||||
|
|
@ -99,8 +99,8 @@ angularWidget('ng:include', function(element){
|
||||||
this.directives(true);
|
this.directives(true);
|
||||||
} else {
|
} else {
|
||||||
element[0]['ng:compiled'] = true;
|
element[0]['ng:compiled'] = true;
|
||||||
return ['$http', '$templateCache', '$autoScroll', '$element',
|
return ['$http', '$templateCache', '$anchorScroll', '$element',
|
||||||
function($http, $templateCache, $autoScroll, element) {
|
function($http, $templateCache, $anchorScroll, element) {
|
||||||
var scope = this,
|
var scope = this,
|
||||||
changeCounter = 0,
|
changeCounter = 0,
|
||||||
childScope;
|
childScope;
|
||||||
|
|
@ -133,7 +133,7 @@ angularWidget('ng:include', function(element){
|
||||||
childScope = useScope ? useScope : scope.$new();
|
childScope = useScope ? useScope : scope.$new();
|
||||||
compiler.compile(element)(childScope);
|
compiler.compile(element)(childScope);
|
||||||
if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) {
|
if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) {
|
||||||
$autoScroll();
|
$anchorScroll();
|
||||||
}
|
}
|
||||||
scope.$eval(onloadExp);
|
scope.$eval(onloadExp);
|
||||||
}
|
}
|
||||||
|
|
@ -568,8 +568,8 @@ angularWidget('ng:view', function(element) {
|
||||||
|
|
||||||
if (!element[0]['ng:compiled']) {
|
if (!element[0]['ng:compiled']) {
|
||||||
element[0]['ng:compiled'] = true;
|
element[0]['ng:compiled'] = true;
|
||||||
return ['$http', '$templateCache', '$route', '$autoScroll', '$element',
|
return ['$http', '$templateCache', '$route', '$anchorScroll', '$element',
|
||||||
function($http, $templateCache, $route, $autoScroll, element) {
|
function($http, $templateCache, $route, $anchorScroll, element) {
|
||||||
var template;
|
var template;
|
||||||
var changeCounter = 0;
|
var changeCounter = 0;
|
||||||
|
|
||||||
|
|
@ -593,7 +593,7 @@ angularWidget('ng:view', function(element) {
|
||||||
if (newChangeCounter == changeCounter) {
|
if (newChangeCounter == changeCounter) {
|
||||||
element.html(response);
|
element.html(response);
|
||||||
compiler.compile(element)($route.current.scope);
|
compiler.compile(element)($route.current.scope);
|
||||||
$autoScroll();
|
$anchorScroll();
|
||||||
}
|
}
|
||||||
}).error(clearContent);
|
}).error(clearContent);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
describe('$autoScroll', function() {
|
describe('$anchorScroll', function() {
|
||||||
|
|
||||||
var elmSpy;
|
var elmSpy;
|
||||||
|
|
||||||
|
|
@ -18,9 +18,9 @@ describe('$autoScroll', function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeHashAndScroll(hash) {
|
function changeHashAndScroll(hash) {
|
||||||
return function($location, $autoScroll) {
|
return function($location, $anchorScroll) {
|
||||||
$location.hash(hash);
|
$location.hash(hash);
|
||||||
$autoScroll();
|
$anchorScroll();
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -46,12 +46,6 @@ describe('$autoScroll', function() {
|
||||||
return expectScrollingTo(NaN);
|
return expectScrollingTo(NaN);
|
||||||
}
|
}
|
||||||
|
|
||||||
function disableScroller() {
|
|
||||||
return function($autoScrollProvider) {
|
|
||||||
$autoScrollProvider.disable();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
beforeEach(module(function($provide) {
|
beforeEach(module(function($provide) {
|
||||||
elmSpy = {};
|
elmSpy = {};
|
||||||
|
|
@ -108,16 +102,6 @@ describe('$autoScroll', function() {
|
||||||
expectScrollingTo('id=top')));
|
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() {
|
describe('watcher', function() {
|
||||||
|
|
||||||
function initLocation(config) {
|
function initLocation(config) {
|
||||||
|
|
@ -128,13 +112,19 @@ describe('$autoScroll', function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeHashTo(hash) {
|
function changeHashTo(hash) {
|
||||||
return function ($location, $rootScope, $autoScroll) {
|
return function ($location, $rootScope, $anchorScroll) {
|
||||||
$rootScope.$apply(function() {
|
$rootScope.$apply(function() {
|
||||||
$location.hash(hash);
|
$location.hash(hash);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function disableAutoScrolling() {
|
||||||
|
return function($anchorScrollProvider) {
|
||||||
|
$anchorScrollProvider.disableAutoScrolling();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
afterEach(inject(function($document) {
|
afterEach(inject(function($document) {
|
||||||
dealoc($document);
|
dealoc($document);
|
||||||
}));
|
}));
|
||||||
|
|
@ -182,7 +172,7 @@ describe('$autoScroll', function() {
|
||||||
|
|
||||||
it('should not scroll when disabled', function() {
|
it('should not scroll when disabled', function() {
|
||||||
module(
|
module(
|
||||||
disableScroller(),
|
disableAutoScrolling(),
|
||||||
initLocation({html5Mode: false, historyApi: false})
|
initLocation({html5Mode: false, historyApi: false})
|
||||||
);
|
);
|
||||||
inject(
|
inject(
|
||||||
|
|
@ -225,10 +225,10 @@ describe('widget', function() {
|
||||||
describe('autoscoll', function() {
|
describe('autoscoll', function() {
|
||||||
var autoScrollSpy;
|
var autoScrollSpy;
|
||||||
|
|
||||||
function spyOnAutoScroll() {
|
function spyOnAnchorScroll() {
|
||||||
return function($provide) {
|
return function($provide) {
|
||||||
autoScrollSpy = jasmine.createSpy('$autoScroll');
|
autoScrollSpy = jasmine.createSpy('$anchorScroll');
|
||||||
$provide.value('$autoScroll', autoScrollSpy);
|
$provide.value('$anchorScroll', autoScrollSpy);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -247,20 +247,20 @@ describe('widget', function() {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
beforeEach(module(spyOnAutoScroll()));
|
beforeEach(module(spyOnAnchorScroll()));
|
||||||
beforeEach(inject(
|
beforeEach(inject(
|
||||||
putIntoCache('template.html', 'CONTENT'),
|
putIntoCache('template.html', 'CONTENT'),
|
||||||
putIntoCache('another.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>'),
|
compileAndLink('<ng:include src="tpl" autoscroll></ng:include>'),
|
||||||
changeTplAndValueTo('template.html'), function() {
|
changeTplAndValueTo('template.html'), function() {
|
||||||
expect(autoScrollSpy).toHaveBeenCalledOnce();
|
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>'),
|
compileAndLink('<ng:include src="tpl" autoscroll="value"></ng:include>'),
|
||||||
changeTplAndValueTo('template.html', true),
|
changeTplAndValueTo('template.html', true),
|
||||||
changeTplAndValueTo('another.html', 'some-string'),
|
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>'),
|
compileAndLink('<ng:include src="tpl"></ng:include>'),
|
||||||
changeTplAndValueTo('template.html'), function() {
|
changeTplAndValueTo('template.html'), function() {
|
||||||
expect(autoScrollSpy).not.toHaveBeenCalled();
|
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>'),
|
compileAndLink('<ng:include src="tpl" autoscroll="value"></ng:include>'),
|
||||||
changeTplAndValueTo('template.html', false),
|
changeTplAndValueTo('template.html', false),
|
||||||
changeTplAndValueTo('template.html', undefined),
|
changeTplAndValueTo('template.html', undefined),
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue