6

私はスタックオーバーフローに関する多くの投稿を調べてきましたが、まだ答えを見つけることができませんでした. jQuery スクロールバー プラグイン (nanoscroll) があり、ng-repeat の後に更新したいと考えています。ここの多くの投稿が示唆するように、私は次のようなディレクティブを使用しました:

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

そして、私は次のようなものを持っています:

<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 -->

問題は、コンテンツが利用可能なサイズよりも少し大きい場合.nano div、スクロールバーが表示されないことです (理由はわかりません)。

AngularJS は nanoscroller を更新しようとする前にコントローラーの後にコンテンツを挿入するのを待たず、このコンテンツは posrt-render ディレクティブの後に追加されると思います。ところで、F11 を 2 回 (全画面表示して通常モードに戻す) 押すと、DOM を変更せずにスクロールバーが表示されるため、この問題が NanoScroller に起因するとは思えません。

ありがとう、ヒルニウス

__ _ _答え

最後に私は解決策を見つけました。疑問に思う方は、$timeout サービスを使用する必要があります。そのように：

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

解決策を見つけましたが、そこにあった問題をまだ認識していません。angularディレクティブがDOMが完全に変更されるのを待っていなかったためだと思います。おそらく時間の問題があったのでしょう。

4

1 に答える 1

0

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

$timeout サービスを使用する必要があります。このような：

myApp.directive('postRender',['$timeout', function (timer) {
    return {
        link: function (scope, elem, attrs, ctrl) {
            timer(function () {
                    jQuery('.nano').nanoScroller({preventPageScrolling: true})    
                 }, 0);
        }
    }
}]);
于 2015-07-08T18:50:08.297 に答える