0

ng-includeディレクティブに、以下のようにautoscroll属性をいれても、自動スクロールが効きません。
<div ng-include="temp" autoscroll></div>

autoscroll=""
のようにしても同様です。

ドキュメントを見ると、autoscroll属性の設定により、読み込んだ部分の位置までスクロールする、と書いてあるようなのですが。

どなたか、お分かりの方がいらっしゃいましたら、教えてください。

1 件の回答 1

1

autoscroll属性の設定により、読み込んだ部分の位置までスクロールする、と書いてあるようなのですが。

autoscroll属性は、ng-includeを指定した要素に自動スクロールする機能ではなく、
$anchorScrollのスクロール機能を使用するか否かを設定するものです

この$anchorScrollは、$location.hash()の値と一致するIDを持つ要素を探し、
存在した場合、その要素の位置までスクロールされます

http://jsfiddle.net/xsdauxn7/
上記にサンプルを作成しましたので参考にしてください

4
  • @hiroさん、ご回答ありがとうございます。 autoscroll属性は、スクロール機能使用の可否を設定するものとのこと、理解致しました。 大変お手数ですが、もう1点、追加で質問させていただけますでしょうか。 公式サイトのデモ docs.angularjs.org/api/ng/directive/ngInclude と同様に、動的にテンプレートを切り替える場合、 実行URLが「~.html#/scroll#scroll」であれば動作するのですが、 (初回起動時である)「~.html#/scroll」の場合、以下のようなエラーが発生してしまいます。作成いただいたサンプルでも、同様でした。 --- Error: $rootScope:infdig Infinite $digest Loop 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [] --- そこで、以下のようにしてみました。 $scope.$on('$includeContentRequested', function(e, path) { $location.hash('scroll'); }); 【つづく】
    – kira
    2015年5月6日 15:42
  • 【つづき】しかし、1回目のテンプレート読み込みでは、やはりオートスクロールが効かず、2回目の読み込みから(URLが「~.html#/scroll#scroll」で)効くようになります。 1回目のテンプレート読み込みで動作するようにしたいのですが、どのような設定を行えばよいでしょうか。 何度もすみませんが、よろしくお願い致します。
    – kira
    2015年5月6日 15:43
  • 調べた所デフォルトの状態ではlocationはHashbangモードで解析されるようです。(docs.angularjs.org/guide/$location)、そのため『~.html##scroll』のような指定にする必要があります。 本来なら$location.hash('scroll')時に、上記URLのように変換されるべきだと思いますが、バグなのかpath部分が無い場合hashをpathとして解析し『~.html#/scroll』のように変換され、hashとして機能していません。簡単な解決方法は、hashを指定する前に$location.path('');で空のpathを指定する。又は、hashPrefixに値を指定するとpathが無くても正しく解析されるようなのでhashPrefixに何か指定すると良いようです。angular.module('xx').config(function($locationProvider) { $locationProvider.hashPrefix('!'); }]);
    – hiro
    2015年5月7日 2:26
  • ご回答ありがとうござます。 お教えいただいた通り、空のpathを設定、または、hashPrefixを設定することにより、無事動作することを確認できました。大変助かります。重ねて、お礼申し上げます。
    – kira
    2015年5月8日 0:29

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。