Использование $location и $anchorScroll для прокрутки строки таблицы в представлении

Я пытаюсь использовать $anchorScroll для прокрутки страницы вниз, чтобы показать строку таблицы. Я прочитал большую часть SO-потоков и документов о $anchorScroll. Насколько я могу судить, я использую его правильно. Я прошел через код с Firebug, и кажется, что идентификатор элемента, который я использую, верен.

Когда я выполняю функцию, которая должна менять местоположение прокрутки, она меняет местоположение прокрутки, но она просто прокручивается вверх, полностью переходя к вершине. Мой "целевой" элемент, который я хочу прокрутить, дальше по странице, откуда я выполняю функцию.

Нет сообщений об ошибках, он просто не делает то, что мне нужно.

Вот простая функция, которую я использую:

$scope.scrollTo = function (elementId) {
        console.log("element[" + angular.element(elementId) + "]");
        $location.hash(elementId);
        $timeout(function() {
            $anchorScroll();
        });
    };

Я также попытался изменить ссылку на это, чтобы вместо того, чтобы нацеливать строку таблицы, он нацеливается на аккордеон div, который заключает в таблицу, но это не имело никакого значения. Он все еще просто перескакивает в начало страницы.

Обратите внимание, что прежде чем я назову "scrollTo" , сначала убедитесь, что аккордеон с таблицей открывается. В любом случае он по-прежнему не прокручивается правильно даже после его ручного открытия.

Update:

Вот часть HTML, которую я пытаюсь прокрутить до:

                <div ng-controller="WorkflowDefsCtrl">
                <pane accordion-group heading="Workflows" is-open="accordionActiveFlags.workflowDefs" id="workflowDefs">
                    <label for="workflowDefsTable">Workflow Definitions</label>
                    <table id="workflowDefsTable" ng-table class="table">
                        <tr ng-repeat="workflowDef in sunlightConfig.workflowDefinitions | orderBy: workflowDef.order" id="workflowDef{{workflowDef.id}}">
                            <td data-title="'ID'">{{workflowDef.id}}</td>
                            <td data-title="'Name'">{{workflowDef.name}}</td>
                            <td data-title="'Label'">{{workflowDef.label}}</td>
                            <td data-title="'Order'" class="text-right">{{workflowDef.order}}</td>
                            <td data-title="'Render?'">{{workflowDef.render}}</td>
                            <td data-title="'Query Fragment'">{{workflowDef.queryFragment}}</td>
                            <td data-title="'Query Order'" class="text-right">{{workflowDef.queryOrder}}</td>
                        </tr>
                    </table>
                </pane>
            </div>

Два тестовых файла, которые я пытаюсь, будут иметь элемент "workflowDefs" и любой из элементов "workflowDef {{workflowDef.id}".

Update:

Я улучшил свой метод "scrollTo" , чтобы справиться с прокруткой к элементам, которые только что стали видимыми. Однако это не имеет никакого значения. Он все еще просто прокручивает вверх, несмотря ни на что.

Update:

Сегодня я понял, что строковый аргумент "angular.element" должен быть селектором CSS, а не идентификатором элемента, поэтому мне пришлось добавить "#" в качестве префикса. Это привело к тому, что правильный элемент был расположен, но, к сожалению, он все еще не влиял на отображение. Он еще не прокручивает элемент.

Моя новая функция "scrollTo" выглядит так:

    scrollTo:   function (elementId) {
        $location.hash("#" + elementId);
        $timeout(function() {
            $anchorScroll();
        });
    },

ОТВЕТЫ

Ответ 1

Мне удалось это понять. Я правильно предположил, что $anchorScroll должен быть выполнен в блоке $timeout, но этого недостаточно. Вызов $location.hash() также должен быть в блоке $timeout. Как только я изменил свою функцию "scrollTo" на следующее:

    scrollTo:   function (elementId) {
        $timeout(function() {
            $location.hash(elementId);
            $anchorScroll();
        });
    },

Затем он начал работать последовательно.

Ответ 2

Когда состояние изменено и $location.hash() не пуст, прокрутите список до требуемого элемента идентификатора хэша на навигационной странице. $timeout гарантирует, что прокрутка к блоку id hash выполняется после правильной загрузки страницы.

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
    if ($location.hash()) {
        $timeout(function() {
            var hashId = $location.hash();
            $anchorScroll();
            document.getElementById(hashId).focus();
        });
    }
 });