कोणीय सामग्री के साथ 'md-tooltip` गतिशील रूप से कैसे निकालें?

Question

मेरे पास md-tooltip के अंदर एक मूल md-button है। हालांकि, यदि उपयोगकर्ता मोबाइल डिवाइस पर है तो मुझे अपनी वेबसाइट से सभी टूलटिप्स को वैश्विक रूप से हटाने का एक तरीका चाहिए।

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

बाद टेम्पलेट भरी हुई है और निर्देशों चलने के बाद, इसके बाद के संस्करण में परिवर्तित हो जाती है:

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

वहाँ बटन तत्व नहीं रह गया है md-tooltip होता है, अन्यथा मैं बस सिर्फ टूलटिप को दूर करता हूँ तत्व।

ऐसा करने का कारण मोबाइल पर है, md-tooltip बटन क्लिक करता है। इसलिए पहले क्लिक पर टूलटिप प्रदर्शित होता है और बटन दूसरे क्लिक पर कार्रवाई पर क्लिक करते हैं। यह निश्चित रूप से एक वांछनीय प्रभाव नहीं है।

मैं अपने पृष्ठ पर सभी तत्वों से सभी टूलटिप्स कैसे हटा सकता हूं ताकि मेरे बटन क्लिक करें दूसरी बार के बजाय पहला क्लिक/टैप हो?

Answer 1

ठीक है, तो मैं सफलतापूर्वक मेरी सुझाव पहले क्रियान्वित किया है, यहाँ DEMO

मैं सिर्फ इसके बारे में कोणीय सामग्री के संस्करण ओवरराइड करने के लिए md-tooltip का एक और संस्करण बनाया है। फिर मैंने angular.decorator बनाया ताकि यह चुनने के लिए कि md-tooltip का कौन सा निर्देश संस्करण कोणीय उपयोग करेगा।

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

}); 

mdTooltipDirective में Directive शब्द कोणीय करने के लिए कहने के लिए है कि हम एक सेवा निर्देशक के लिए नहीं यह चयन करना चाहते हैं महत्वपूर्ण है,।

संपादित करें: मैं एक लिंक समारोह जोड़ा गया है और तत्व यह है कि अधिभावी निर्देश

---

मैं नहीं दिख रहा है ऐसा करने के तरीके पर उनके डॉक्स पर किसी भी उल्लेख द्वारा रखा गया है हटा दिया।

दो तरीकों से मैं इस बारे में सोचने के बारे में सोच सकता हूं।

1. अपने एक मोबाइल डिवाइस पर यदि display: none सभी <md-tooltip>।
2. mdTooltip निर्देश तो सशर्त $compile मूल MD-टूलटिप या एक खाली एक (यदि आप एक मोबाइल पर हैं)

Answer 2

ब्लॉग

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

अनुसार ओवरराइड एमडी-टूलटिप बग कोड है।

तो मैं आपको शर्त के आधार पर टूलटिप कोड चलाने के लिए सुझाव दूंगा। अगर मोबाइल डिवाइस पर ब्राउज़र तो टूलटिप

जोड़ने के लिए कोड नहीं चला आप उपयोग कर सकते हैं जैसा:

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

लिए 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; 
    } 
}