ng-repeat 后的 AngularJS NanoScroller 不显示

Posted 2023-05-09

【中文标题】ng-repeat 后的 AngularJS NanoScroller 不显示

【英文标题】：AngularJS NanoScroller after ng-repeat doesn't show

【发布时间】：2013-11-09 01:45:13

【问题描述】：

我在 *** 上看过很多帖子，但我还没有找到答案。我有一个 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 指令之后添加的。 顺便说一句，我怀疑这个问题来自 NanoScroller，因为当我按 F11 两次（全屏并返回正常模式）时，没有任何 DOM 修改，滚动条出现。

谢谢， 希尔纽斯

____ 回答

我终于找到了解决方案。对于那些想知道的人，有必要使用 $timeout 服务。像这样：

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

尽管我找到了解决方案，但我仍然不知道存在的问题。我相信这是因为 angular 指令没有等待 DOM 被完全修改，也许有时间问题。

【问题讨论】：

最好将答案发布为“答案”并将其标记为答案:)

【参考方案1】：

OP 找到了解决方案。

必须使用 $timeout 服务。像这样：

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