Wie man eine `md-Tooltip` mit Angular Material dynamisch entfernt?

Question

Ich habe eine grundlegende md-button mit einer md-tooltip innen. Obwohl ich eine Möglichkeit benötige, alle QuickInfos von meiner Website global zu entfernen, wenn sich der Benutzer auf einem mobilen Gerät befindet.

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

Nachdem die Vorlage geladen und Richtlinien ausgeführt haben, wird die oben in die folgende umgewandelt:

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

Es Knopfelement nicht mehr die md-tooltip enthält, sonst würde ich einfach entfernen Sie einfach den Tooltip Element.

Der Grund für das wollen ist, weil auf dem Handy md-tooltip den Knopf klickt. Daher wird der Tooltip beim ersten Klick angezeigt und die Schaltflächen klicken beim zweiten Klick auf Aktion. Dies ist definitiv kein wünschenswerter Effekt.

Wie kann ich alle QuickInfos von allen Elementen auf meiner Seite entfernen, so dass meine Schaltflächen klicken Aktion ist der erste Klick/Antippen statt der zweiten?

Answer 1

Ok, also habe ich erfolgreich meine Vorschläge früher umgesetzt, hier ist der DEMO

ich eine andere Version von md-tooltip erstellt gerade Winkel Materials Version davon außer Kraft zu setzen. Dann habe ich ein angular.decorator erstellt, um zu wählen, welche Direktivenversion von md-tooltip eckig verwendet wird.

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

}); 

das Directive Wort in mdTooltipDirective ist wichtig, zu kantig zu sagen, dass wir es für die Richtlinie nicht einen Dienst auswählen möchten.

EDIT: Ich habe eine Link-Funktion und entfernt das Element, das durch die übergeordnete Richtlinie gelegt wird

---

Ich sehe keine Erwähnung auf ihre Dokumente auf, wie dies zu tun.

Es gibt zwei Möglichkeiten, die ich mir vorstellen kann, um dies zu umgehen.

1. display: none alle <md-tooltip> wenn Sie auf einem mobilen Gerät.
2. überschreiben die mdTooltip Richtlinie dann bedingt $compile die ursprüngliche md-Tooltip oder eine leere ein (wenn Sie auf einem Handy sind)

Answer 2

Gemäß dem Blog

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

Der md-Tooltip ist der Buggy-Code.

Also ich werde vorschlagen, dass Sie Tooltip-Code basierend auf der Bedingung ausführen. Wie, wenn Browser auf dem mobilen Gerät dann nicht den Code ausführen Tooltip für das Hinzufügen von

Sie verwenden, um die:

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

Für den mobilen Browser in AngularJS erkennen.

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