6

私はAngularのものを使用してscrollToおり、次のanchorScrollようにしています:

app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});

<a ng-click="scrollTo('foo')">Foo</a>

<div id="foo">Here you are</div>

私の問題は、リンクをクリックするとページがスクロールダウンすることですが、URL のハッシュが変更されるため、50% のケースでページがリロードされます。

Angular がページをリロードしないようにするにはどうすればよいですか?

更新：ここで見つけました

https://groups.google.com/forum/?fromgroups=#!msg/angular/BY2ekZLbnIM/MORF-z2vHnIJ

それ

The $location service broadcasts a $locationChangeStart event. You can observe that and call event.preventDefault() to stop the navigation. Nice!

そのイベントを観察してデフォルトを防ぐ方法を誰でも教えてもらえますか

4

5 に答える 5

9

locationChangeStart イベントへの呼び出しがあるため、更新が行われています。これを停止するには、次のようにします。

scope.$on('$locationChangeStart', function(ev) {
    ev.preventDefault();
});

実際に、この呼び出しを内部で使用する独自の scrollTo ディレクティブを作成することになりました。

Plnkr / Github

これに関する私の他の投稿はこちら

于 2013-07-29T16:09:53.363 に答える
6

$event パラメーターを ng-click ハンドラーに追加できます。

<a ng-click="scrollTo('foo', $event)">Foo</a>

scrollTo 関数では、次のことができます。

scope.scrollTo = function(str, event) {
    event.preventDefault();
    event.stopPropagation();

    /** SOME OTHER LOGIC */
}

ただし、これは、「a」要素から手動でターゲット アンカー ハッシュを解析する必要があることを意味します。

于 2013-04-02T10:31:10.183 に答える
2

これはあなたを助けるかもしれないと思います

$scope.redirectTodiv = function(divname,event) {
    var id = $location.hash();
    $location.hash(divname);
    $anchorScroll();
    $location.hash(id);
};

から: https://stackoverflow.com/a/25930875/4138368

于 2016-07-27T03:32:29.280 に答える
1

そのイベントは rootScope で発行されるため、$onメソッドを使用してオブザーバーを登録できます。 

$scope.$on('$locationChangeStart', function(ev) {
  ev.preventDefault();
});
于 2013-03-18T11:32:56.683 に答える