Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

fix(ngInclude): only run anchorScroll after animation is done #4758

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions src/ng/directive/ngInclude.js
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,13 @@ var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile'
};

scope.$watch($sce.parseAsResourceUrl(srcExp), function ngIncludeWatchAction(src) {
var afterAnimation = function() {

if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) {
$anchorScroll();
}

};
var thisChangeId = ++changeCounter;

if (src) {
Expand All @@ -192,13 +199,8 @@ var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile'
currentElement = clone;

currentElement.html(response);
$animate.enter(currentElement, null, $element);
$animate.enter(currentElement, null, $element, afterAnimation);
$compile(currentElement.contents())(currentScope);

if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) {
$anchorScroll();
}

currentScope.$emit('$includeContentLoaded');
scope.$eval(onloadExp);
});
Expand Down
26 changes: 25 additions & 1 deletion test/ng/directive/ngIncludeSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -322,22 +322,36 @@ describe('ngInclude', function() {
};
}

function spyOnAnimateEnter() {
return function($animate) {
spyOn($animate, 'enter').andCallThrough();
};
}

function runEnterAnimation($animate) {
if ($animate.enter.mostRecentCall) {
$animate.enter.mostRecentCall.args[3]();
}
}

function compileAndLink(tpl) {
return function($compile, $rootScope) {
element = $compile(tpl)($rootScope);
};
}

function changeTplAndValueTo(template, value) {
return function($rootScope, $browser) {
return function($rootScope, $browser, $animate) {
$rootScope.$apply(function() {
$rootScope.tpl = template;
$rootScope.value = value;
});
runEnterAnimation($animate);
};
}

beforeEach(module(spyOnAnchorScroll()));
beforeEach(inject(spyOnAnimateEnter()));
beforeEach(inject(
putIntoCache('template.html', 'CONTENT'),
putIntoCache('another.html', 'CONTENT')));
Expand Down Expand Up @@ -374,6 +388,16 @@ describe('ngInclude', function() {
changeTplAndValueTo('template.html', null), function() {
expect(autoScrollSpy).not.toHaveBeenCalled();
}));

it('should only call $anchorScroll after the "enter" animation completes', inject(
compileAndLink('<div><ng:include src="tpl" autoscroll></ng:include></div>'),
function($rootScope, $animate) {
$rootScope.$apply("tpl = 'template.html'");
expect($animate.enter).toHaveBeenCalledOnce();
expect(autoScrollSpy).not.toHaveBeenCalled();
runEnterAnimation($animate);
expect(autoScrollSpy).toHaveBeenCalledOnce();
}));
});
});

Expand Down