Dev Faq
7
votes

Comment supprimer de manière dynamique une `MD-ToolTip` avec un matériau angulaire?

J'ai un bouton MD de base code> avec un MD-ToolTip code> à l'intérieur. Bien que, j'ai besoin d'un moyen de supprimer globalement toutes les info-bulles de mon site Web si l'utilisateur est sur un périphérique mobile. 

<button class="md-primary md-raised md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Hello">
    <span class="ng-scope">
       Hello
    </span>
    <div class="md-ripple-container"></div>
</button>

0 commentaires

3 Réponses :

6
votes

OK, j'ai donc mis en œuvre avec succès mes suggestions plus tôt, voici le Demo

J'ai créé une autre version de MD-ToolTip juste pour remplacer la version de la matière angulaire de celui-ci. Ensuite, j'ai créé un angular.decorator pour choisir la version de la directive de MD-ToolTip utilisera une utilisation angulaire. xxx

le directive mot dans mdtooltipdirectif est important, de dire à l'angulaire que nous voulons le sélectionner pour la directive et non un service.

EDIT: J'ai ajouté un Fonction de liaison et supprimé l'élément qui est placé par la directive primordiale

Je ne vois aucune mention sur leurs documents sur la façon de faire cela.

Il y a deux manières que je puisse penser à travailler autour de cela.

  1. Affichage: Aucune Tous Si vous êtes sur un périphérique mobile.
  2. Remplacement de la directive mdtooltip puis conditionnellement $ compile l'original MD-ToolTip ou un blanc (si vous êtes sur un mobile)
7 commentaires

Malheureusement, cette première solution ne fonctionnera pas. Sur mobile, le MD-ToolTip mangez les boutons Cliquez sur Action. Par conséquent, un double robinet sur mobile est nécessaire pour effectuer les boutons Cliquez sur Action. Je crois que votre option de section peut valoir un coup. Toute chance d'un exemple?

@Fizzix j'ai édité ma question et j'ai mis en œuvre ma suggestion numéro 2

Perfecttttt. Ne prend plus sur le clic mobile. Très bien fonctionne, bon travail!

Hahaha! Super! Merci :)

Si j'ai un NG-répéter et avez MD-ToolTips à l'intérieur de cette répétition quelque part, votre code semble faire beaucoup de mal et détruit les données dans le NG-REPEAT et LEAVS Données vierges affichant comme des accolades bouclées au lieu de les convertir. Cela peut avoir quelque chose à voir avec la portée . $ Détruire () je suppose?

Le élément.remove () et portée. $ Détruire () sont facultatifs, bien que vous ayez les éléments inutiles placés sur votre HTML. Est-ce que cela fonctionne bien si vous enlevez ceux?

@Fizzix, j'ai édité ma réponse, fondamentalement, j'ai créé une portée isolée de sorte qu'elle ne détruit pas la portée de la directive. C'est maintenant corrigé :)

0
votes

selon le blog

https://github.com/angular/material/issues/4176 < / p>

Le MD-ToolTip est le code de Bugy.

Donc, je vous suggérerai d'exécuter un code d'info-bulle basé sur la condition. Comme si le navigateur sur le périphérique mobile, n'exécutez pas le code d'ajout de ToolTip

Vous pouvez utiliser le:

http://ngmodules.org/modules/ng-device-detector < / p>

pour détecter le navigateur mobile en angularjs.

2 commentaires

Mais si je dispose de plus de 100 MD-Tooltips sur mon site? Je devrais aller manuellement à chacun et ajouter une condition ... prendrait des âges.

Ensuite, vous devez mettre l'initialisation `MD-Tooltips 'en condition

0
votes 
HTML

<md-tooltip md-direction="bottom"  class="tooltip">Tooltip Bottom</md-tooltip>

CSS

@media(max-width:599px) {
md-tooltip.tooltip {
        display: none !important;
    }
}
0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO