6

長いリストビューに多くのアイテムがあります。ユーザーが 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: page2.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 ng-include="'scroll_view.html'"><!-- MUST use "'...'" notation here --></div>
  </body>
</html>

そして、これはサンプル 2 で必要な scroll_view.html です::

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

2 に答える 2

5

ng-include でautoscroll属性を使用する必要があります。

こちらのドキュメントを確認してください: http://docs.angularjs.org/api/ng.directive:ngInclude

autoscroll(optional) – {string=} – ngInclude が $anchorScroll を呼び出して、コンテンツがロードされた後にビューポートをスクロールするかどうか。属性が設定されていない場合は、スクロールを無効にします。属性が値なしで設定されている場合は、スクロールを有効にします。それ以外の場合は、式が真の値に評価される場合にのみスクロールを有効にします。

だからあなたの場合：

<div ng-include="'scroll_view.html'" autoscroll></div>
于 2012-12-10T21:04:59.760 に答える
1

html5Modeをtrueに設定する必要があると思いますが、よくわかりません。これがうまくいくかどうかを確認してください（私にとってはうまくいきましたが、file：///...を使用してページをロードするChrome23でのみテストしました）：

<!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-11T17:28:15.077 に答える