6

私はstackoverflowで多くの投稿をしてきましたが、私はまだ答えを見つけることができませんでした。 jQueryスクロールバープラグイン(nanoscroll)があり、ng-repeatの後に更新したいと思っています。場合、問題は(私がなぜ分からない)ということであるng-repeat後のAngularJS NanoScrollerは表示されません

<div class="nano"> <!-- my scrollable area --> 
    <div ng-controller="MyController"> 
     <div ng-repeat="item in items" post-render> 
     ... 
     </div> 
    </div> 
    Some content here... 
</div> <!-- my scrollable area --> 

myApp.directive("postRender", function() { 
    return function(scope, element, attrs) { 
     jQuery('.nano').nanoScroller({preventPageScrolling: true}); 
    } 
}); 

し、私のようなものを持っている:ここ として多くの記事は、私がこのようなディレクティブを使用しました、示唆しますコンテンツは.nano divの利用可能なサイズよりちょっとだけ大きいですが、スクロールバーは表示されません。

私は、AnglerJSがコントローラの後にnanoscrollerを更新しようとする前にコンテンツを挿入するのを待たず、このコンテンツがposrt-renderディレクティブの後に追加されると考えます。 ところで、私はこの問題がNanoScrollerに由来するのではないかと疑っています。なぜなら、F11を2回(フルスクリーンとノーマルモードに戻って)押したときに、DOMを変更しなくてもスクロールバーが表示されるからです。

おかげで、 hilnius

は__ _ _ ANSWER

は最終的に私は解決策を見つけました。不思議な人には、$ timeoutサービスを使う必要があります。そのように:

myApp.directive('postRender',['$timeout', function (timer) { 
    return { 
     link: function (scope, elem, attrs, ctrl) { 
      timer(function() { 
        jQuery('.nano').nanoScroller({preventPageScrolling: true}) 
       } 
       , 0); 
     } 
    } 
}]); 

私は解決策を見つけましたが、そこにあった問題はまだ分かりません。私はそれが角度指示がDOMが完全に修正されるのを待っていなかったので、おそらく時間の心配があったと思う。

+0

「回答」として回答を投稿し、回答としてマークすることをお勧めします。 – BotanMan

答えて

0

OPが解決策を見つけました。

$タイムアウトサービスを使用する必要があります。このように:

myApp.directive('postRender',['$timeout', function (timer) { 
    return { 
     link: function (scope, elem, attrs, ctrl) { 
      timer(function() { 
        jQuery('.nano').nanoScroller({preventPageScrolling: true})  
       }, 0); 
     } 
    } 
}]); 
関連する問題