21

新しいページをロードするように ng-click イベントを設定する必要があります。ページがロードされたら、ページのアンカーポイントまでスクロールします。この SO 投稿で提案されているすべてのソリューションを試しましたが、正しく機能しません。

これらのソリューションのほとんどは、既に読み込まれているページのアンカーまでスクロールすることを中心にしています。新しいページが読み込まれた後にスクロールする必要があります。

ここに私のビューコードがあります:

<div class="see-jobs-btn" ng-click="$event.stopPropagation();goToResultJobs(r)">See Jobs</div>

これは「プロファイル カード」内のボタンを表します。ユーザーがカードをクリックすると、プロフィール ページに移動します。ただし、ユーザーがボタンをクリックすると、そのプロファイル ページの #jobs 部分に移動する必要があります (したがって、コード内の goToResultJobs(r) の前に $stopPropogation() があります)。

私の goToResultJobs メソッドは次のようになります。

$scope.goToResultJobs = function(result) {
    var profileUrl = result.slug;
    window.location = profileUrl;
};

$anchorScrollアンカーを にハードコーディングして使用しようとしましたprofileUrlが、どちらも機能しません。私はAngularにかなり慣れていないので、ここで何が欠けているのかわかりません。

更新 1: $timeout を使用しようとしています

goToResultJobsユーザーがボタンをクリックしたときにトリガーされる ResultsCtrl 内のメソッドは次のとおりです。

$scope.goToResultJobs = function(result) {
    var url = window.location + result.slug + '#jobs';
    location.replace(url);
};

これにより、/name#jobsパスが読み込まれ、以下の ProfileCtrl が呼び出されます。

app.controller('ProfileCtrl', ['$scope', '$http', '$timeout', '$location', '$anchorScroll',
function($scope, $http, $timeout, $location, $anchorScroll) {
    if(window.location.hash) {
        $timeout(function() {
            console.log('TEST');
            // $location.hash('jobs');
            // $location.hash('jobs');
            $anchorScroll();
        }, 1000);
    };
}]);

TESTジョブ ボタンがクリックされたときにのみコンソールに表示され、ユーザーがプロファイルをクリックしただけでは表示されないため、このセットアップは機能しているようです。私が今直面している問題は、ページの読み込みが開始され、URL バーのパスが に変更されますが/name#jobs、ページの読み込みjobsが完了する前に、URL から削除されることです。したがって、$anchorScroll()が呼び出されたときに、スクロール先のハッシュにアンカー タグがありません。

4

5 に答える 5

18

指摘したように$anchorScroll、ページがレンダリングされた後に発生する必要があります。そうしないと、アンカーは存在しません。これは、 を使用して実現できます$timeout()。

$timeout(function() {
  $anchorScroll('myAnchor');
});

この plunkrを見ることができます。必ずポップアウト モード (出力画面の右上隅にある小さな青いボタン) で表示してください。

于 2015-05-14T21:35:12.757 に答える
4

なんてこった、これはautoscroll="true"テンプレートに追加するだけで実現できます：

<div autoscroll="true" data-ng-include='"/templates/partials/layout/text-column.html"'></div>

ドキュメンテーション

于 2016-09-14T17:54:59.590 に答える
-1

ページがロードされた後、ネイティブ Javascript のElement.scrollIntoView()を使用できますか?

于 2015-05-14T19:49:33.183 に答える
-1

試す：

angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
  function ($scope, $location, $anchorScroll) {
      $scope.gotoBottom = function() {
      // set the location.hash to the id of
      // the element you wish to scroll to.
      $location.hash('bottom');

      $anchorScroll();
    };
}]);

ここでの「下」は、スクロール先の html 要素の ID です。

ドキュメントはこちら: https://docs.angularjs.org/api/ng/service/$anchorScroll

于 2015-05-14T20:52:47.877 に答える