ng-repeat之后的AngularJS NanoScroller没有显示

AngularJS NanoScroller after ng-repeat doesn't show

本文关键字：显示 NanoScroller AngularJS 之后 ng-repeat      更新时间：2023-09-26

我已经浏览了许多关于stackoverflow的帖子，但我还没有找到答案。我有一个jQuery滚动条插件（nanoscroll），我希望它在ng重复后更新。正如这里的许多帖子所建议的那样，我使用了这样的指令：

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);
        }
    }
}]);

虽然我找到了一个解决方案，但我仍然不知道那里的问题。我相信这是因为角度指令没有等待 DOM 完全修改，也许存在时间问题。

OP找到了解决方案。

有必要

使用$timeout服务。喜欢这个：

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