angularjsにスクロール

Question

私はそれを表示した後、ページ上の要素にスクロールしようとしています。 I.私は非常に長いユーザーリストを持っており、リストとして表示しています。各要素には、クリックできる編集アイコンがあります。クリックすると、ページの上部にあるユーザーフォームが表示されます。私はその場所にスクロールしたい。編集ユーザーのクリックで

// helper method to scroll 
    $scope.scrollTo = function (id) { 
    $location.hash(id); 
    $anchorScroll(); 
    } 

：

$scope.editUser = function (user) { 
    $scope.user = user; // set user 
    $scope.setShowUserForm(true); // show edit form 
    $scope.scrollTo('admin-form'); // scroll to the form 
    } 

これが初めて除いて素晴らしい作品。私はDOMをチェックし、私の 'user-form'要素はDOMにありますが、私が望むのは隠されています。編集ユーザーをクリックすると、初めてスクロールが機能しなくなります。初めてそれが失敗した後、すべては問題ありません。何が変わったのか分かりません。

また、デフォルトで表示するフォームを設定して、DOM内にあることがわかり、編集をクリックすると初めて表示されるようにしました。それも私の問題を解決しませんでした。 DOM内であろうとなかろうと、最初のスクロールが隠れているかどうかは分かりません。

私が間違っていることは何ですか？

編集：

私は何が起こっているか知っていると思うが、私はそれを解決する方法は考えています。私は自分のアプリケーションでルーティングを使用しています。

/＃/メイン /＃/ adminに私はそれにスクロールを使用しています、私の管理ページが問題を引き起こしている

その：私のようなルートを持っています。あるとき

/＃/管理＃管理者-形式：ここで私はまでスクロールしたいHTMLです：私はそれをスクロールするために、角度を使用する場合に問題がある

<div id="admin-form"> 
... 
</div> 

はに私のURLを変更しますそれはルートコントローラを押して、スクロールが起こらない理由である私の管理ページをリロードするように思えます。一度私は/＃/ admin＃admin-form urlにいます。角度は私のルートに変更が見られず、ページをリロードしないので、スクロールが機能します。しかし、私のURLを/＃/ adminに戻して、スクロールを実行するボタンをクリックすると、URLが/＃/ admin＃admin-formに再度変更されます。

これは予期したとおりだと確信していますが、修正方法はわかりません。もしできれば。

Answer 1

AngularsルーティングはscrollToがメイン管理ページに戻るために私を再ルーティングので、私の場合には悪いの変化を、ピックアップしているようです。

$ location.hash（）をスクロールしてリセットすると、URLの変更が機能しているように見えません。

$scope.scrollTo = function (id) { 
    var old = $location.hash(); 
    $location.hash(id); 
    $anchorScroll(); 
    $location.hash(old); 
    } 

編集：

1.4.0いるため、@のtheunexpected1によるコメントで述べたように、角度の$anchorScrollは、あなたが直接URLを更新する必要なしに、パラメータとしてIDを渡すことができますハッシュ：

Answer 2

あなたは私のblogとコメントにこのことに関する質問を投稿しました。あなたのコードのすべてを見ずに

は、私はこれだけで推測することができますが、私はあなたを助けるかもしれないいくつか伝えることができます：

1. はあなたが隠し要素にスクロールすることはできませんが。
2. 実際のスクロールは、$ digest中に処理される$ anchorScrollによってセットアップされる$ watchによって行われます。
3. フォーム要素を表示/非表示に設定しているものは、$ digestの$ watchで処理されています。

このように、フォームを表示するために値を処理する前にスクロールを処理しようとしているようです。これを修正するには、フォームを表示するために使用しているコードをリファクタリングするか、$ anchorScrollコールを$タイムアウトでラップして、ショーの時計の後に実行されるようにします。

私は役立つことを願っています。

Answer 3

私はこの問題を浮き彫りにしました。メッセージを表示するためにボタンを2回クリックする必要があることに注意してください。

http://plnkr.co/edit/oU3REYC2upvlPMc5ipBp?p=preview

Answer 4

今後の参考のため、ここではスクロールについて同じ問題が発生したが、nスクロールするためにng-routesを使うと、Ben_Leshの答えは実際には非常に洞察力があります。

私はスクロールするだけでなく、初めてに関して同じ問題に実行しても動作しないをクリックし

$location.hash(id) 
$anchorScroll() 

を使用していました。私の問題は、最初のをクリックしてを設定し、オブジェクトを表示してからスクロールしようとしましたが、スクロール時には、はまだページに表示されませんでした。その後、サイクルの最後に、ページが再描画されます。

2回目のクリックで、要素がに設定されました。が表示されるようになりました。スクロールがうまく機能します。

ソリューションは が

$タイムアウト（関数（）{$スコープ。$（適用）}、0）

を呼び出すために、あなたはあなたの要素が見えるようにブール値を設定した後、あります

スクロール機能を呼び出します。このようにして、スクロールする前に強制的に再レン​​ダーします。 Voila！

Answer 5

私が特定の要素にスクロールしたいと思った場合、私は何をしようとしているのかを示すURLを更新することに興味がありませんでした（例えば、www.something.com/#adminの＃admin-form id -form）

URLを更新せずにスクロールすると、場所のハッシュを更新することなくアンカースクロールを呼び出すことができます。

$anchorScroll('admin-form');