Utiliser $ location et $ anchorScroll pour faire défiler une ligne de la table dans la vue

Je suis en train d'utiliser $anchorScroll de faire défiler la page pour vous assurer qu'une ligne d'un tableau. J'ai lu de la plupart des threads et des docs sur $anchorScroll. Je suis de l'utiliser correctement, dans la mesure où je peux dire. J'ai franchi le code avec Firebug, et il semble que l'identifiant de l'élément que j'utilise est correct.

Quand j'execute la fonction qui devrait changer le défilement de l'emplacement, il n'modifier le défilement de l'emplacement, mais il vient de défiler vers le haut, aller tout le chemin vers le haut. Ma "cible" de l'élément que je veux faire défiler jusqu'à est en bas de la page où j'ai exécuter la fonction.

Il n'y a pas de messages d'erreur, il n'a tout simplement pas faire ce dont j'ai besoin.

Voici la fonction que j'utilise:

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

J'ai aussi essayé de changer la référence à cette sorte qu'au lieu de cibler une ligne de la table, il vise l'accordéon div qui entoure la table, mais cela ne faisait aucune différence. Il reste juste sauts vers le haut de la page.

Noter qu'avant que j'appelle "scrollTo", j'ai d'abord s'assurer que l'accordéon, la table est ouverte. En tout cas, ça ne fonctionne toujours pas, faites défiler correctement même après être ouvert manuellement.

Mise à jour:

Voici une partie du code HTML que je suis en train de faire défiler:

                <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>

Les deux cas de tests, je vais essayer d'aller à l'élément "workflowDefs" et des "workflowDef{{workflowDef.id}}" éléments.

Mise à jour:

J'ai amélioré mon "scrollTo" méthode pour traiter avec le défilement des éléments qui venait de devenir visible. Cela ne fait aucune différence, cependant. Il reste juste fait défiler vers le haut, peu importe quoi.

Mise à jour:

Aujourd'hui, j'ai réalisé qu'un argument de type chaîne de "angulaire.l'élément" doit être un sélecteur CSS, pas un élément d'id, j'ai donc dû ajouter "#" comme préfixe. Il en est résulté dans le bon élément, mais malheureusement, il n'avait toujours pas eu d'effet sur l'affichage. Ça ne fonctionne toujours pas, faites défiler jusqu'à l'élément.

Mon nouveau "scrollTo" fonction ressemble à ceci:

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

source d'informationauteur David M. Karr