Question

我的目标相对简单。我希望能够在<ul>列表中的滚动条中显示一个按钮。

为此，我添加了以下JQuery插件来检查列表中是否有滚动条：

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollWidth > this.width();
    }
})(jQuery);

这段代码效果很好，所以我在我的控制器的方法中调用了这个hasScrollBar()函数：

$scope.hasGoTabButtonToBeDisplayed = function() {
    return $("#tabset>ul").hasScrollBar();
}

只有当我的列表上有滚动条时，我才会使用ng-show指令来显示我的按钮：

<button type="button"
 class="btn btn-xs" 
 style="float:left;" 
 ng-show="hasGoTabButtonToBeDisplayed()" 
 ng-click="onGoLeftTabButtonClicked()">
    <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
</button>

当我加载页面时，如果我的列表上有滚动条但是如果我调整窗口大小并且出现滚动条，则显示或不显示按钮，按钮的显示不会改变，这意味着我的{{1} }方法未被调用。我理解为什么不调用这个方法，因为Angular无法检测到这个方法的变化，但我不知道该怎么做。

也许我有一个错误的逻辑来解决这样的问题？

Answer 1

实际上，我找到了解决方案。我不知道这是最好的解决方案，还是一个好的解决方案，但似乎有效。

所以为了解决我的问题，我只是在我的范围内捕获窗口的resize事件，并像这样调用$scope.$digest()方法：

angular.element($window).bind('resize', function() {
    $scope.$digest();
});

滚动条变为可见时更新ng-show

1 个答案: