Come rimuovere dinamicamente un `md-tooltip` con materiale angolare?

Question

Ho uno md-button di base con un md-tooltip all'interno. Anche se, ho bisogno di un modo per rimuovere globalmente tutti i tooltip dal mio sito web se l'utente è su un dispositivo mobile.

<md-button class="md-primary md-raised"> 
    Hello 
    <md-tooltip>This is a buttons tooltip</md-tooltip> 
</md-button> 

Dopo che il modello viene caricato e direttive hanno eseguito, quanto sopra viene convertito in quanto segue:

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

Non elemento pulsante non è più md-tooltip, altrimenti sarei semplicemente rimuovere il tooltip elemento.

Il motivo per cui si desidera eseguire questa operazione è perché sul cellulare, lo md-tooltip mangia il clic del pulsante. Quindi avendo il tooltip visualizzato al primo clic e i pulsanti clicca l'azione al secondo clic. Questo non è sicuramente un effetto desiderabile.

Come posso rimuovere tutti i suggerimenti da tutti gli elementi sulla mia pagina in modo che i miei pulsanti facciano clic sull'azione è il primo clic/tocco al posto del secondo?

Answer 1

Ok, così ho implementato con successo i miei suggerimenti in precedenza, ecco la DEMO

ho creato un'altra versione di md-tooltip solo per sostituire la versione del materiale angolare di esso. Quindi ho creato uno angular.decorator per scegliere quale versione direttiva di md-tooltip utilizzi angolarmente.

app.directive('mdTooltip', function(){ //create your overriding directive 
    return{ 
    replace: true, 
    template: '<span style="display:none"></span>', 
    scope: {}, //create an isolated scope 
    link: function(scope, element){ 
     element.remove(); 
     scope.$destroy(); 
    } 
    }; 
}); 

app.decorator('mdTooltipDirective',function($delegate){ 

    var version = 0; 
    var onMobile = false;//do your checking here 

    if(onMobile) //here comes the switching 
    version = 1; 

    return [$delegate[version]]; 

}); 

la parola Directive in mdTooltipDirective è importante, a dire a angolare che vogliamo per selezionarlo per la direttiva non un servizio.

EDIT: ho aggiunto una funzione di collegamento e rimosso l'elemento che viene inserito dalla direttiva prioritario

---

non vedo alcuna menzione sul loro documentazione su come fare questo.

Ci sono due modi in cui posso pensare di aggirare questo problema.

1. display: none tutto il <md-tooltip> se il tuo su un dispositivo mobile.
2. ignorare l'istruzione mdTooltip poi condizionato $compile l'MD-tooltip originale o uno vuoto (se siete su un cellulare)

Answer 2

Come per il blog

https://github.com/angular/material/issues/4176

Md-tooltip è il codice bugy.

Quindi ti suggerisco di eseguire il codice del tooltip in base alle condizioni. Come se il browser sul dispositivo mobile allora non eseguire il codice per l'aggiunta di tooltip

È possibile utilizzare il:

http://ngmodules.org/modules/ng-device-detector

Per rilevare il browser mobile in angularjs.

Answer 3

HTML 

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

CSS 

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