javascript 如何使隐藏（ng-cloaked）项目保留其可见时占用的空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24383299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a hidden (ng-cloaked) item preserve the space it takes up when its visible
提问by timh
In a table... I have action buttons that appear when the mouse goes over that row by using ng-cloak and ng-show.
在表格中...当鼠标通过使用 ng-cloak 和 ng-show 移过该行时，我会出现操作按钮。
The problem is, when the icon appears, it takes up more space than when its not there, and the html around it jumps.
问题是，当图标出现时，它比不存在时占用更多的空间，并且它周围的 html 会跳转。
I even set my css to use display:none for ng-click, which I thought is supposed to preserve the space the hidden element takes up (as opposed to visibility: hidden).
我什至将我的 css 设置为对 ng-click 使用 display:none，我认为这应该保留隐藏元素占用的空间（而不是可见性：隐藏）。
How can I fix this? OR can you think of a better way to do this?
我怎样才能解决这个问题？或者你能想出更好的方法来做到这一点吗？
<tr id="treeHistoryItem" ng-repeat="o in tree.history"
ng-mouseover="showEdit=true" ng-mouseleave="showEdit=false">
....
<td align='right'>
<a ng:cloak ng-show="showEdit" href
ng-click="removeTreeRec(o.$$hashKey)"
class='fa fa-times _red _size6' ></a>
</td>
</tr>
Here's a plunkr example: http://plnkr.co/edit/POA9b2pZA9QbBgcMsxBE?p=preview
这是一个 plunkr 示例：http://plnkr.co/edit/POA9b2pZA9QbBgcMsxBE?p=preview
采纳答案by ivarni
ngCloakis used to
ngCloak用于
prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading
防止 Angular html 模板在您的应用程序加载时以原始（未编译）形式被浏览器短暂显示
The correct place to put it would be way further up in the DOM tree but it's really meant to solve a different problem than this. I would try just going with ngShowhere and rather override its CSS class, .ng-hideto do visibility: hidden;rather than display: none;
放置它的正确位置应该是在 DOM 树中更靠上的位置，但它确实是为了解决与此不同的问题。我会尝试只是去ngShow这里，而覆盖其CSS类，.ng-hide这样做visibility: hidden;，而不是display: none;
(Visibility is the one that preserves space, not display).
（可见性是保留空间的，而不是显示的）。
As noted in the docs for ngShowyou will need to use !importantto override the display: none;property.
正如ngShow的文档中所述，您需要使用!important来覆盖该display: none;属性。
Note, in the version of Angular you were using in your plunker, ngShowis adding an inline style to the hidden element. I am not sure which version moved away from that but I could not get this approach to work with 1.0.5.
请注意，在您在 plunker 中使用的 Angular 版本中，ngShow正在向隐藏元素添加内联样式。我不确定哪个版本远离它，但我无法让这种方法与 1.0.5 一起使用。
Here's it working with your plunker, but with the most recent Angular version: Plunk
这是它与您的 plunker 一起使用，但使用最新的 Angular 版本： Plunk
回答by Duncan MacLeod
Late to the party, however...
然而，聚会迟到了……
In my case, whenever I need to do this i use ng-class. If you copy the code from your ng-show and put it into: HTML:
就我而言，每当我需要这样做时，我都会使用 ng-class。如果您从 ng-show 复制代码并将其放入：HTML：
ng-class="{'disabled': showEdit}"
ng-click="showEdit && removeTreeRec(o.$$hashKey)"
CSS:
CSS：
.disabled {
visibility: hidden;
cursor: default;
}
Cursor:default simply makes the cursor not change for usability purposes. Hope this helps!
Cursor:default 只是为了可用性目的而不会改变光标。希望这可以帮助！
EDIT: in this case adding the cursor and showEdit to the ng-click probably wont make a difference as the icon will always be shown if the mouse is over the icon due to the hover event, but nonetheless I think it's good practice to cover all bases
编辑：在这种情况下，将光标和 showEdit 添加到 ng-click 可能不会有什么不同，因为如果由于悬停事件鼠标悬停在图标上，图标将始终显示，但我认为覆盖所有基地
回答by jvrdelafuente
You can do that using css. You can put to your <tr>a height.
你可以使用 css 来做到这一点。你可以把你<tr>的高度。
回答by Dayan Moreno Leon
you can assign height to your containers which sometimes isn't practical because you don't always know the content height up front. or you could change your classes content declaring them to be
您可以为容器分配高度，这有时并不实用，因为您并不总是预先知道内容高度。或者您可以更改您的课程内容，将它们声明为
.not_remove.ng-cloak,.not_remove.ng-hide{
display:block;
visibility:hidden;
}
note the .not_remove class. this will enforce this new behavior only on elements who have the no_remove class. the display property can be setted to what ever flow your element follows
注意 .not_remove 类。这将仅对具有 no_remove 类的元素强制执行此新行为。可以将显示属性设置为您的元素所遵循的流
