0

Angular バージョン: 最新--1.2

ng-viewに基づいてビューをロード$routeproviderしています。アプリケーションを開発している最中なので、現在、ブラウザで URL を指定するだけで、対応する VIEW がロードされます。

問題は、部分ページにリンクがあり、特定の div にスクロールする必要があり、リンクが を使用して生成されることng-repeatです。

コード：

<li ng-repeat = "(key,val) in test.Questions">      
    <a href="#{{key}}" >{{ $index+1}}</a>        
</li>

したがって、上記の生成されたリンクをクリックすると、URL がリンクに置き換えられます。

例: 

http://localhost:8085/Questionarie/#/exam/533135

は VIEW をロードする URL ですが、次のように置き換えられます。 

http://localhost:8085/Questionarie/#QS7.....

代わりに私はこのようなものが欲しい

http://localhost:8085/Questionarie/#/exam/533135#QS7

注: を使用してみましたが、文字列リテラルを に指定した場合$anchorscrollにのみ機能し、動作しないように指定した場合にのみ機能しますscrollTO('foo')...scrollTo({{foo}})..

現在、私はバックエンドを使用しておらず、localhost で UI を開発しているだけです。HTML5 モードに関する情報を見ましたが、使い方がわかりませんでした。

またNodeJS、今後も使って表現する予定です。

結論したがって、問題は、上記のケースだけでなく、Twitter Bootstrap タブを使用しているときに URL が置き換えられる、angularJS ルーティングと競合する内部ページ リンクです。

4

1 に答える 1

0

これが ngRouter に当てはまるかどうかはわかりませんが、いくつかの利点の 1 つを挙げれば、入れ子になったビューをサポートする ui-router に切り替えることを強くお勧めします。

ステップ 1: $anchorScroll サービスの登録を解除します。

angular.module('myapp', [...]).value('$anchorScroll', angular.noop)...

ステップ 2: $viewContentLoaded でリスナーをセットアップします。 

myapp.run(['$state', '$stateParams', '$window', function ($state, $stateParams, $window) {
  $rootScope.$on('$viewContentLoaded', function () {
    var state = $state.$current;
    if (state.scrollTo == undefined) {
      $window.scrollTo(0, 0);
    } else {
      var to = 0;
      if (state.scrollTo.id != undefined) {
        to = $(state.scrollTo.id).offset().top;
      }
      if ($($window).scrollTop() == to) {
        return;
      }
      if (state.scrollTo.animated) {
        $(document.body).animate({scrollTop:to});
      } else {
        $window.scrollTo(0, to);
      }
    }
  });
}]);

ステップ 3: 状態を設定する

state('applications.details', {         
  ...
  scrollTo    : { id:'#applications-content-anchor', animated: true }
}).

GitHub の gaelduplessix の厚意による。

https://github.com/angular-ui/ui-router/issues/110

注:私はこれを個人的にテストしていませんが、問題スレッドの一般的な反応は、私がこれをあなたのやり方で片付けるのに十分肯定的でした.うまくいけば、すべてうまくいくでしょう.

幸運を。

于 2014-02-04T07:08:01.287 に答える