如何使隐藏(ng-cloaked)项目保留其可见空间

Question

在表格中......我有一些动作按钮,当鼠标越过该行时,使用ng-cloak和ng-show显示.

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

我甚至将我的CSS设置为使用display:none进行ng-click,我认为这应该保留隐藏元素占用的空间(而不是可见性:隐藏).

我怎样才能解决这个问题？或者你能想到更好的方法吗？

     <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习惯了

在加载应用程序时,防止浏览器以原始(未编译)形式简单显示Angular html模板

把它放在正确的地方将是在DOM树中更进一步,但它真的意味着解决一个不同的问题.我会尝试只是去ngShow这里,而覆盖其CSS类,.ng-hide这样做visibility: hidden;,而不是display: none;

(可见性是保留空间而不是显示的那个).

如ngShow的文档中所述,您需要使用!important覆盖display: none;属性.

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

这是它与你的plunker合作,但最新的Angular版本: Plunk

Answer 2

迟到了,但......

就我而言,每当我需要这样做时,我都会使用ng-class.如果您复制ng-show中的代码并将其放入:HTML:

ng-class="{'disabled': showEdit}"
ng-click="showEdit && removeTreeRec(o.$$hashKey)"

CSS:

.disabled {
 visibility: hidden;
 cursor: default;
}

游标:默认只是为了可用性而不改变游标.希望这可以帮助!

编辑:在这种情况下,将光标和showEdit添加到ng-click可能不会产生影响,因为如果鼠标悬停在图标上,由于悬停事件,图标将始终显示,但我认为覆盖所有内容是一种好习惯.基地