【bug】table從新加載數據，頁面滾動條下沉到底部，記錄scrollTop後將其恢復scrollTop出現閃爍

1.table數據請求前記錄scrollTop

$scope.scrollPos = document.documentElement.scrollTop;

 

2.html中添加指令repeat-finishi

<tr ng-repeat="item in lists" class="repeat-finish">

3.寫入指令

AppDirective.directive('repeatFinish', function () {
    return {
        restrict: "C",
        link: function (scope, element, attr) {
            if(scope.$last === true){
                $(document).scrollTop(scope.scrollPos);
            }
        }
    }
});

當指令檢測到DOM已經渲染好（scope.$last === true表示repeat渲染完成）當即恢復以前記錄的scrollTop，這樣從table加載好到恢復scrollTop就接近無延遲，閃爍的狀況消失了。

注：若是有滾動條定位誤差（angular表達式編譯完成呈現視圖先後引發的折行，頁面高度會發生變化，因此定位有差異。雖然scope.$last === true表示了遍歷完成，可是頁面重繪並無完成，主要是數據綁定的顯示），在link裏面加個setTimeout();這是會閃爍一下；

閃爍這個現象暫時沒有找到完美的解決辦法，有大佬想到什麼辦法的話，歡迎@，E-mail: dxdleikai@163.com

 

後續：（已經找到解決辦法）

指令修改成以下：

AppDirective.directive('repeatFinish', function ($parse) {
    return {
        restrict: "CA",
        link: function (scope, element, attr) {
            if(scope.$last === true){
                var watchLast = scope.$watch('lastHashKey', function(newValue, oldValue) {
                    $(document).scrollTop(scope.scrollPos);
                });
                scope.$on('$destroy', function() {
                    watchLast();
                });
            }
        }
    }
});

 

控制器須要在更新數據列表後添加：

$scope.lastHashKey = $scope.tableList[$scope.tableList.length - 1].$$hashKey)

完美解決