解決が結構面倒だった。
まずng-repeatでスクロール領域内を更新していたので、更新完了イベントが必要だった。
以下のdirectiveを定義してng-repeat完了イベントを定義した。
module sample {
'use strict';
/**
* ng-repeat処理完了イベントを発行するDirective
*/
export class OnFinishRenderDirective implements ng.IDirective {
public priority: number = -1;
public restrict: string = 'A';
public scope: any = {};
private timeoutService: angular.ITimeoutService;
public link: Function;
/* @ngInject */
constructor($timeout: angular.ITimeoutService) {
this.timeoutService = $timeout;
this.link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attr: ng.IAttributes): any => {
if ((<angular.IRepeatScope>scope.$parent).$last === true) {
this.timeoutService(function() {
scope.$emit('ngRepeatFinished');
}, 0);
}
};
}
/* @ngInject */
public static init($timeout : angular.ITimeoutService): any {
return new OnFinishRenderDirective($timeout);
}
}
}
このon-finish-renderディレクティブはng-repeatを付けているタグに付ける。
後はスクロール領域のスクロールイベントで今表示中の位置を保存し、OnFinishRenderイベントでその値をスクロール位置に設定する。
あるあるな問題だろうからもっと楽な解決策ありそうだけどな。。
参考: