Come rendere un elemento nascosto (ng-cloaked) preservare lo spazio che occupa quando è visibile

Question

In una tabella ... Ho pulsanti di azione che appaiono quando il mouse passa sopra quella riga usando ng-cloak e ng- mostrare.

Il problema è, quando viene visualizzata l'icona, occupa più spazio rispetto a quando non è lì, e l'html attorno a esso salta.

Ho anche impostato il mio CSS da usare display: none per ng-click, che ho pensato che si suppone di preservare lo spazio l'elemento nascosto occupa (in contrapposizione a visibility: hidden).

Come posso risolvere questo problema? O riesci a pensare a un modo migliore per farlo?

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

Ecco un esempio plunkr: http://plnkr.co/edit/POA9b2pZA9QbBgcMsxBE?p=preview

Answer 1

ngCloak è usato per

evitare che il modello HTML angolare venga visualizzato brevemente dal browser nella sua forma grezza (non compilato) mentre l'applicazione è carico

la correttezza posto per metterlo sarebbe molto più in alto nell'albero DOM ma in realtà è pensato per risolvere un problema diverso da questo. Vorrei provare solo andando con ngShow qui e un po 'ignorare la sua classe CSS, .ng-hide fare visibility: hidden; piuttosto che display: none;

(La visibilità è quello che conserva lo spazio, non essere visualizzati).

Come indicato nello docs for ngShow, è necessario utilizzare !important per ignorare la proprietà display: none;.

Nota: nella versione di Angular che si stava utilizzando nel plunker, ngShow aggiunge uno stile in linea all'elemento nascosto. Non sono sicuro di quale versione si sia spostata, ma non sono riuscito a far funzionare questo approccio con 1.0.5.

Ecco che lavorare con il vostro plunker, ma con la più recente versione angolare: Plunk

Answer 2

È possibile farlo usando i CSS. Puoi mettere al tuo <tr> un'altezza.

Answer 3

è possibile assegnare altezza per i contenitori che a volte non è pratico, perché non sempre si conosce l'altezza contenuti in attacco . oppure è possibile modificare il contenuto delle classi dichiarandoli come

.not_remove.ng-cloak,.not_remove.ng-hide{ 
      display:block; 
      visibility:hidden; 

    } 

nota la classe .not_remove. questo rafforzerà questo nuovo comportamento solo sugli elementi che hanno la classe no_remove. la proprietà display può essere impostata su ciò che scorre mai il tuo elemento segue

Answer 4

In ritardo per la festa, tuttavia ...

Nel mio caso, ogni volta che ho bisogno di farlo uso ng-class. Se si copia il codice dal tuo ng-show e metterlo in: HTML:

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

CSS:

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

cursore: predefinito semplicemente rende il cursore non cambia per scopi di usabilità. Spero che questo aiuti!

MODIFICA: in questo caso l'aggiunta del cursore e mostraEdit al ng-clic probabilmente non farà la differenza poiché l'icona verrà sempre mostrata se il mouse è sopra l'icona a causa dell'evento hover, ma comunque penso sia buona Pratica per coprire tutte le basi