angolare: aggiornamento dell'oscilloscopio al volo stazionario

Question

Mi piacerebbe che qualche div child di una div principale sia nascosta di default visibile quando si passa con il mouse sopra il div principale.

Sto provando ad avere quel nativo in angolare e dimenticare il modo .hover() in jQuery.

Ho pensato di utilizzare ng-show sul div figlio e quindi di aggiornare l'associazione quando passaggio il div principale. C'è una direttiva da ascoltare in bilico?

Answer 1

Sei sulla strada giusta. È possibile utilizzare effettivamente le direttive ngMouseenter e ngMouseleave per fare ciò.

<span ng-mouseenter="show = true" ng-mouseleave="show = false"> 
    Mouse over me. 
</span> 

<div ng-show="show">Hello!</div> 

Ecco un Plunker di lavoro: http://plnkr.co/edit/Ro80nR7HT7OGGPCXjz7E?p=preview

@ Swordfish0321 è anche giusto - si può scrivere un semplice direttiva per ascoltare specificamente per il bilico, se vuoi, ma non può essere necessario. Ad esempio, utilizziamo mouseenter e mouseleave per suggerimenti in UI Bootstrap.

Answer 2

Grazie a @JoshDavidMiller per una risposta molto succinta. Ho avuto bisogno di fare questo in una ng-repeat e non riuscivo a capire un modo elegante per farlo. L'uso di un booleano sull'oscilloscopio mostrava i controlli di modifica per tutti gli elementi nell'elenco anziché solo quello su cui stavo passando il mouse. Mi sono quasi chinato a sferrare angular.element (ad esempio JQuery) e ad associare me stesso i gestori di hover in modo che potessero mostrare manualmente solo i controlli per l'elemento stazionario. Sono contento di non essermi abbassato in questi modi malvagi.

<div ng-repeat="item in items" ng-mouseenter="item.showEdit = true" ng-mouseleave="item.showEdit = false"> 
    <span class="glyphicon glyphicon-edit" ng-show="item.showEdit"></span> 
    Mouse over me. 
</div> 

Basta collegare lo struttura al item piuttosto che $scope. In alcune situazioni non ho potuto aggiungere chiavi casuali agli elementi nella mia lista, quindi ho mappato la mia matrice a una nuova in cui la item è effettivamente una proprietà su un oggetto wrapper, quindi potrei allegare qualsiasi proprietà che volevo all'oggetto wrapper senza inquinare le chiavi item.