0

テンプレートからのコンテンツを含む div を DOM に動的に挿入する AngularJS サービスと、テンプレート内のバインディングとディレクティブを処理するカスタム コントローラーを作成しました。と呼ばれるサービスを使用すると、およびをオプションとしてmyService渡すことができます。以下は単純化されたコードです。templateUrlcontrollerName

function display(id, templateUrl, controllerName) {
  var scope = $rootScope.$new();
  scope.id = id;
  var element = angular.element('<div ng-include="\'' + templateUrl + '\'"></div>');
  var controller = $controller(controllerName, {$scope: scope});
  element.contents().data('$ngControllerController', controller);
  $compile(element)(scope);
  parentElement.append(elem);
}

ng-click複数のアンカー タグを処理する DOM に別のコントローラーがあります。

<a ng-click="handleClick(record.id, record.templateUrl, record.controllerName)">Click Me</a>

私は a を使用しておらず$routeProvider、アンカータグに href 属性も id 属性もありません。クリック関数はカスタム サービスを呼び出して div をレンダリングします。

$scope.handleClick = function($event, id, templateUrl, controllerName) {
  myService.display(id, templateUrl, controllerName);
};

ページが Chrome ブラウザーに読み込まれ、下にスクロールして のリンクng-clickが表示されるようにし、リンクをクリックすると、ブラウザーがページの上部にスクロールします。ページをスクロールしたくありません。リンクの横に div を表示するだけです。場所の URL に変更はありません。下にスクロールすると、新しい div が表示されます。で別のリンクをクリックすると、ng-clickスクロールは行われません (これは最初のクリックでも必要でした)。ページを更新すると、どのリンクを最初にクリックしても関係なく、最初のクリックで常にブラウザがビューポートの上部にスクロールして戻ります。

新しい要素にディレクティブを配置せず、ng-include代わりにテンプレートの HTML をサービスにハードコーディングすると、最初のクリックでページの上部にスクロールしません。

ngInclude のドキュメントには、オプションの属性を指定できると記載autoscrollされており、属性が設定されていない場合は「自動スクロールが無効になる」と記載されています。そうではないようです。自動スクロールを「false」に設定しようとしましたが、それは役に立ちませんでした。

$anchorScrollProvider.disableAutoScrolling()すべての自動スクロールを無効にできることはわかっていますが、特定のタグの自動スクロールを無効にするにはどうすればよいですか? これは報告すべき Angular のバグですか? もしそうなら、そのバグが修正されるまで使用できる回避策はありますか?

編集:これは、問題を示すプランクです。

4

2 に答える 2

0

Philip Holly のコメントによると、バージョン 1.1.5 で変更があり、ハッシュがない場合 $anchorScroll によってページが一番上にスクロールされます。修正は次を追加しています：

angular.module('myApp').value('$anchorScroll', angular.noop);

あなたがしたように属性を設定するとautoscrollうまくいくはずだと思いますが。おそらくそれはバグです。

または、次のようにします。

$location.hash("!");

$compile も機能する直前。

于 2013-07-19T21:50:25.990 に答える