Question

我有一个简单的UI Bootstrap警报，用于显示错误消息等。我将其隐藏（默认情况下）隐藏在页面顶部的标题下方。我可以使用范围变量更改颜色和文本，并使用ng-hide隐藏它。这是警报html：

<alert type={{alertType}} close="hideAlert = true"
    ng-hide="hideAlert" class="ng-hide">{{alertText}}</alert>

问题在于，当页面加载并且隐藏警报时，隐藏警报会占用额外的20px空间。当我检查元素时，似乎＆＃39; x＆＃39;关闭按钮占用21px的空间，并且不会像警报一样缩小。这是元素控制台中显示的内容，

<button ng-show="closeable" type="button" class="close" ng-click="close($event)">
    <span aria-hidden="true">×</span>
    <span class="sr-only">Close</span>
</button>

此外，警报的文本元素正在执行相同的操作，除了20px的空间 - 尽管此空间包含在21px以上。元素控制台显示：

<div ng-transclude="">
    <span class="ng-binding ng-scope">Default Alert!</span>
</div>

alert和alert.ng-hide的CSS如下所示：

.alert {
    -moz-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    -webkit-transition: 0.5s linear all;
    transition: 0.5s linear all;

    display: block !important;
    max-height:50px;
    opacity: 1;
}

.alert.ng-hide {
    display: block !important;
    max-height:0px;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

为什么这些警报组件在隐藏时不会缩小的任何想法？

Answer 1

我认为问题出在你的CSS行display: block !important;当hideAlert为真时，UI Bootstrap将display:none;应用于警告，该警报完全隐藏它但是被覆盖了display:block !important。

我也不确定为什么需要为ng-hide元素中的class属性提供alert值。

我同意ibrahimbayer使用ng-if可以解决问题。

使用AngularJS ng-hide的UI Bootstrap Alert会占用额外的空间

1 个答案: