3

ページのリロード時に特定のアンカー タグまでスクロールする必要があります。$anchorScroll を使用してみましたが、$location.hash() を評価しますが、これは必要なものではありません。

$anchorScrollProvider のソース コードに基づいてカスタム プロバイダーを作成しました。その中で、rootScope の $watch リストに値を追加し、変更時に $evalAsync を呼び出します。

プロバイダー:

zlc.provider('scroll', function() {
  this.$get = ['$window', '$rootScope', function($window, $rootScope) {
    var document = $window.document;
    var elm;

    function scroll() {
      elm = document.getElementById($rootScope.trendHistory.id);
      if (elm) elm.scrollIntoView();  
    }

    $rootScope.$watch(function scrollWatch() {return $rootScope.trendHistory.id;},
      function scrollWatchAction() {
        if ($rootScope.trendHistory.id) $rootScope.$eval(scroll);
      });

    return scroll;
  }];
});

ここで、コントローラーでスクロール プロバイダーを呼び出そうとすると、scroll () を呼び出す前に $scope.$apply() でダイジェストを強制する必要があります。

コントローラ：

//inside function called on reload
$scope.apply();
scroll();

なぜ $scope.$apply() を呼び出さなければならないのですか? 現在のスコープ内で呼び出されたときにスクロール関数が Angular コンテキストで評価されないのはなぜですか? ご協力ありがとうございました！

4

1 に答える 1

2

あなたの考えが使用の背後にあるのかわかりません$rootScope.$eval(scroll)-scroll()関数は、$rootScope.

私が正しく理解していれば、に保存されている id で示される特定の要素までスクロールできるようにしたいと考えています$rootScope.trendHistory.id。

その ID が変更されたら、その要素までスクロールします (ページに存在する場合)。

これがあなたが達成しようとしていることの正しい解釈であると仮定すると、これを実装する方法は次のとおりです。

app.service('scrollService', function($rootScope) {
  $rootScope.trendHistory = {};

  $rootScope.$watch('trendHistory.id', function(val) {
    if (val) {
      elm = document.getElementById($rootScope.trendHistory.id);
      if (elm) elm.scrollIntoView();
    }
  });

  this.scrollTo = function(linkId) {
    $rootScope.trendHistory.id = linkId;
  }
});

これは、$rootScope に $watch を設定し、$rootScope.trendHistory.id. 変更が検出されると、それが存在する場合は示された要素にスクロールします。そのビットはコードから直接取得されます。

したがって、これをコントローラで使用するには、 を注入してから、ID を引数としてscrollServiceそのメソッドを呼び出します。scrollTo()例：

app.controller('AppController', function($scope, scrollService) {

        scrollService.scrollTo('some_id');

});

あなたの質問では、これはリロード時に発生する必要があると述べているので、呼び出しをリロード ハンドラーに入れるだけです。アプリのどこからでも値を直接変更することもでき$rootScope.trendHistory.id、スクロールも試行されます。

基本的なアプローチを示すデモは次のとおりです: http://plnkr.co/edit/cJpHoSemj2Z9muCQVKmj?p=preview

お役に立てば幸いです。要件を誤解していた場合はお詫び申し上げます。

于 2014-08-27T12:44:12.930 に答える