2016-08-10 4 views
0

ルートを変更すると、新しい読み込まれたページが上にスクロールされません。私はautoscroll = trueディレクティブをui-view要素に追加しましたが、トップへスクロールされていません.50pxのオフセットがあるかもしれません。トップ固定のナビゲーションバーを使用しなければならないと思います。カスタムオートスクロールtopディレクティブを角で表示

カスタムスクロールディレクティブを追加しました。ジョブを実行すると、新しいページがスクロールされて上部に表示されます。私がこの指示を持っている唯一の障害は、私が下にスクロールさせないことです。私はディレクティブに精通していないし、カスタムディレクティブにコードがないことがわかっています。誰も私にこれを助けることができますか?ここで

はディレクティブです:ここでは

angular.module('myapp') 
.directive("scrollTop", function ($window) { 
return function(scope, element, attrs) { 

angular.element($window).bind("scroll", function() { 
    scope.visible = false; 
    $window.scrollTo(0, 0); 
    scope.$apply(); 
}); 

}; 
}); 

はhtmlコードです:

<body id="myapp" ng-app="myapp"> 
    <div ng-include="'navbar/_navbar.html'" ng-controller="NavbarMenuCtrl"></div> 
    <div class="container-fluid"> 
    <div ui-view scroll-top><%= yield %></div ui-view> 
    </div> 
    <div ng-include="'footer/_footer.html'"></div> 
</body> 

私はそのautoscrollディレクティブを使用することを希望するが、小さなオフセットがあり、それがほとんどにスクロールいます上。たぶん私はカスタムディテールを構築する代わりに、そのディレクティブを回避することができます。私はあなたの助けに感謝します。まだAngularJSの初心者です。

答えて

1

autoscrollは、ビューが更新されるときにui-view要素の上にスクロールするために使用されます。したがって、状態変更が発生したときにウィンドウ全体をスクロールしたい場合は、実行ブロックを追加して状態の変化を監視し、スクロールすることができます。

angular.module('myapp').run(['$rootScope','$window',function($rootScope,$window){ 
    $rootScope.$on("$stateChangeSuccess",function(){ 
     $window.scrollTo(0, 0); 
    }) 
}]); 
+0

ありがとう、これが助けになりました! – medev21

関連する問題