angular: mise à jour de scope en vol stationnaire
j'aimerais qu'un enfant div d'une div principale soit caché par défaut un visible lorsque vous survolez la div principale.
j'essaie d'avoir ce natif en angle et d'oublier le .hover() en jquery.
I thought about using ng-show sur l'enfant div et mise à jour de la liaison quand j'ai placez le pointeur de la div principale. Est-il une directive pour écouter planant?
2 réponses
Vous êtes sur la bonne voie. Vous pouvez en fait utiliser les directives ngMouseenter et ngMouseleave pour cela.
<span ng-mouseenter="show = true" ng-mouseleave="show = false">
Mouse over me.
</span>
<div ng-show="show">Hello!</div>
Voici un travail Plunker: http://plnkr.co/edit/Ro80nR7HT7OGGPCXjz7E?p=preview
@Swordfish0321 a également raison - vous pouvez écrire une directive très simple à écouter spécifiquement pour le vol stationnaire si vous le souhaitez, mais il se peut que ce ne soit pas nécessaire. Nous utilisons mouseenter et mouseleave pour les info-bulles dans UI Bootstrap, pour exemple.
merci à @JoshDavidMiller pour sa réponse très succincte. J'avais besoin de le faire en ng-repeat et je n'arrivais pas à trouver une façon élégante de le faire. L'utilisation d'un booléen sur le scope montrait les contrôles d'édition pour tous les éléments de la liste au lieu de celui sur lequel je planais. J'ai presque réduit à fouetter angular.element (c.-à-d. JQuery) et en attachant moi-même des gestionnaires de vol stationnaire pour qu'ils puissent montrer manuellement juste les commandes de l'élément en vol stationnaire. Je suis content de ne pas s'abaisser à de tels maux façon.
<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>
attachez simplement la propriété à la item plutôt que $scope. Dans quelques situations, je n'ai pas pu ajouter de touches aléatoires aux éléments de ma liste alors j'ai mappé mon tableau à un nouveau où le item est en fait une propriété sur un objet wrapper, alors je pourrais attacher toutes les propriétés que je voulais à l'objet wrapper sans polluer le item touches.