ng-repeat後的AngularJS NanoScroller不顯示

我一直在通過stackoverflow的很多帖子，但我還沒有設法找到答案。我有一個jQuery滾動條插件（nanoscroll），我希望它在ng-repeat後更新。由於許多崗位在這裏建議，我用一個指令是這樣的：ng-repeat後的AngularJS NanoScroller不顯示

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指令之後添加的。順便說一句，我懷疑這個問題來自NanoScroller，因爲當我打F11兩次（全屏並回到正常模式），沒有任何DOM修改，滾動條出現。

感謝， hilnius

__ _ _解答

終於讓我找到了解決方案。對於那些想知道的，有必要使用$超時服務。像這樣：

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

儘管我找到了解決方案，但我仍然沒有意識到存在的問題。我相信這是因爲angular指令並沒有等待DOM被完全修改，也許有時間問題。

來源

2013-10-29 hilnius

最好將答案發布爲「答案」並將其標記爲答案:) – BotanMan

OP找到了解決方案。

有必要使用$超時服務。像這樣：

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

來源

2015-07-08 18:50:08

ng-repeat後的AngularJS NanoScroller不顯示

回答

相關問題