0

我的目标比较简单。我希望能够在<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>

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

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

4

1 回答 1

0

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

因此，为了解决我的问题，我只需在我的范围内捕获窗口的调整大小事件，然后调用如下$scope.$digest()方法：

angular.element($window).bind('resize', function() {
    $scope.$digest();
});
于 2016-02-04T09:06:35.427 回答