角度の部分表示でアンカーにジャンプするにはどうすればよいですか？

長いリストビューには多くのアイテムがあります。ユーザーがmypage.html＃the_item_idにアクセスするには、どのようにして特定のアイテムにジャンプ（ブックマーク）できますか？角度の部分表示でアンカーにジャンプするにはどうすればよいですか？

実際には、私はインラインビュー[サンプル1]を使用することができますが、部分ビュー[サンプル2]を使用する場合は使用できません。後者の場合にバグがありますか、または回避策を使用する必要がありますか？

ありがとうございます！

サンプル1：あなたが見ることがpage.html番号のA100を訪問することができます項目100 ::

<!doctype html> 
<html ng-app> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
    <script> 
     function MainCtrl($scope){ 
      $scope.items = []; 
      for(var i=0; i<200; i++){$scope.items.push({id: i})} 
     } 
    </script> 
    </head> 
    <body ng-controller='MainCtrl'> 
    <div> 
     <ul> 
     <li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li> 
     </ul> 
    </div> 
    </body> 
</html>

サンプル2：WHY、項目100を参照してくださいpage2.htmlの＃のA100を訪問することができませんか？ ::

<!doctype html> 
<html ng-app> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
    <script> 
     function MainCtrl($scope){ 
      $scope.items = []; 
      for(var i=0; i<200; i++){$scope.items.push({id: i})} 
     } 
    </script> 
    </head> 
    <body ng-controller='MainCtrl'> 
    <div ng-include="'scroll_view.html'"><!-- MUST use "'...'" notation here --></div> 
    </body> 
</html>

そして、これはあなたがNG-含んで自動スクロール属性を使用する必要がサンプル2 ::

<div> 
    <ul> 
    <li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li> 
    </ul> 
</div>

出典

2012-12-09 RayLuo

私はまったく同じ問題を抱えています。あなたはまだ解決策を見つけましたか？私が発見したことから、問題はjqlite 'element.getElementById'が' scroll'関数の中でnullを返すことです。コンテンツがDOMにまだ存在しないためでしょうか？ – NilsH

で必要scroll_view.htmlです。

ここにドキュメントをチェック：http://docs.angularjs.org/api/ng.directive:ngInclude

自動スクロール（オプション） - {文字列は=} - かどうかngIncludeは、コンテンツがロードされた後、ビューポートをスクロールする$ anchorScrollを呼び出す必要があります。属性が設定されていない場合は、スクロールを無効にします。属性を値なしで設定する場合は、スクロールを有効にします。それ以外の場合は、式が真理値に評価される場合にのみスクロールを有効にします。だからあなたの場合

：

<div ng-include="'scroll_view.html'" autoscroll></div>

出典

2012-12-10 21:04:59 matys84pl

トリックありがとう！私は本当にすべてのドキュメントを通過する必要があります。 – RayLuo

私は助けてうれしいです。受け入れられた答えを選択してください。 ;） – matys84pl

それで、理論的には問題を解決するはずだった。問題は私たちが思ったよりも複雑であることが分かります。 Chrome 23でテストしたところ、インライン実装（sample1）のみが正常に動作します。自動スクロール設定の有無にかかわらず、パーシャルビューを使用している場合、page.html＃anchor notationは私たちを目的地に連れて行くことはできません。 Firefox 17では、上記の組み合わせの作業以外の状況はさらに悪化しています。 AngularJS 1.0.3をWindowsプラットフォームでテストしています。それは私だけであるかどうかわからない。だから、この質問を開いたままにして、他の人がどのようにフィードバックするかを見てください。とにかく@ matys84plありがとうございました。 – RayLuo

私はhtml5Modeをtrueに設定することが必要だと思いますが、私は確かではありませんよ。これはあなたのために働く場合（：/// ...それは私のためにやったが、私は唯一のファイルを使用してページをロードクローム23でテスト）：参照してください

<!doctype html> 
<html ng-app="app"> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
    <script src="app.js"></script> 
    <script type="text/ng-template" id="scroll_view.html"> 
     <div> 
     <ul> 
      <li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li> 
     </ul> 
     </div> 
    </script> 
    <script> 
     function MainCtrl($scope){ 
      $scope.items = []; 
      for(var i=0; i<200; i++){$scope.items.push({id: i})} 
     } 
    </script> 
    </head> 
    <body ng-controller='MainCtrl'> 
    <div ng-include="'scroll_view.html'"><!-- MUST use "'...'" notation here --></div> 
    </body> 
</html>

app.js：

var app = angular.module('app', []). 
    config(function($locationProvider) { 
    $locationProvider.html5Mode(true); 
    })

出典

2012-12-11 17:28:15

角度の部分表示でアンカーにジャンプするにはどうすればよいですか？

答えて

関連する問題