Question

我已经在stackoverflow上发了很多帖子，但我还没有找到答案。我有一个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修改，滚动条就会出现。

谢谢， hilnius

__ _ _ ANSWER

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

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

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

Answer 1

OP找到了解决方案。

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

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

ng-repeat后的AngularJS NanoScroller没有显示

1 个答案: