javascript - 如何使隐藏(ng-cloaked)元素保留其可见时占用的空间

Question

在表格中...我使用 ng-cloak 和 ng-show 在鼠标经过该行时出现操作按钮。

问题是，当图标出现时，它比不出现时占用更多空间，并且它周围的 html 会跳转。

我什至将我的 css 设置为对 ng-click 使用 display:none，我认为这应该保留隐藏元素占用的空间(而不是 visibility: hidden)。

我该如何解决这个问题？或者您能想出更好的方法吗？

     <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>

这是一个简单的例子: http://plnkr.co/edit/POA9b2pZA9QbBgcMsxBE?p=preview

Answer 1

ngCloak用于

prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading

放置它的正确位置应该是在 DOM 树中更靠上的位置，但它实际上是为了解决与此不同的问题。我会尝试在这里使用 ngShow 而不是覆盖它的 CSS 类 .ng-hide 来执行 visibility: hidden; 而不是 显示:无；

(可见性是保留空间，而不是显示)。

如 docs for ngShow 中所述您将需要使用 !important 来覆盖 display: none; 属性。

请注意，在您在 plunker 中使用的 Angular 版本中，ngShow 正在向隐藏元素添加内联样式。我不确定哪个版本偏离了那个版本，但我无法让这种方法与 1.0.5 一起使用。

这是与你的 plunker 一起工作的，但使用的是最新的 Angular 版本: Plunk