当元素在angularjs中溢出时如何发出警报？答案

【问题标题】：How to put alert when the element is overflowing in angularjs?当元素在angularjs中溢出时如何发出警报？
【发布时间】：2015-12-23 17:02:32
【问题描述】：

我正在创建动态导航选项卡。我有主页选项卡（不可关闭），其内容有一些链接。每个链接都在新选项卡中打开。 When the tab occupies all the space available( 900px in my usecase) and still clicks on link for new tab, user should get alert message 注意：标签是动态长度的。

"Close old tabs to open new tabs."

有没有办法判断打开的标签页是否会溢出？

<div class="mytabs">
    <ul class="nav-tabs" style="width: 900px; background-color: gray;" >
        <li ng-class="{'active': activeTab === tab.title}"
            ng-repeat="tab in tabs">
            <a  ng-click="onSelectTab(tab.title)">{{tab.title}}</a>
            <span ng-show="tab.isClosable" ng-click="onClose(tab.title)">
                   <i class="left fa fa-times-circle closeButton" ></i>
            </span>
        </li>
        <li class="bd-bottom clearfix"></li>
    </ul>
    <div class="row mytabs">
        <div class="col-lg-12 col-md-12 col-sm-12 tab-content">
            <div ng-transclude class="mytabs"></div>
        </div>
    </div>
</div>

请指导.. 提前致谢。

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案1】：

我不知道是否有这样的功能，但你可以尝试用一些简单的数学来做到这一点：假设一个标签是 50px;

If (number_of_tab * 50 > 900)
alert("Close old tabs to open new tabs.");

希望对你有帮助。

【讨论】：

每个标签都是动态大小的。在元素填充到屏幕之前，我无法获取元素宽度。所以，我认为溢出可能会有所帮助。如果您有任何其他想法，请提出建议。
你不能创建一个全局变量大小，每次用户打开新标签时添加标签大小并检查变量是大于还是小于900px？
我试过了，但是在元素形成之前价值没有得到价值。元素形成后，选项卡可见。 :(
你能在元素被设置超时后尝试获取价值吗？但这是一种肮脏的方法 x)

【解决方案2】：

首先，您应该知道每个选项卡的宽度。是固定宽度吗？那么最大标签数是maxTabs = 900 / width，然后只跟踪打开的标签数。

如果标签宽度可能不同，那么您应该跟踪所有标签的总宽度。打开新标签后，将其宽度添加到总计中。

在这两种情况下，关闭后不要忘记减去。

【讨论】：