我有一个基本的md按钮,里面有一个md-tooltip.虽然,如果用户在移动设备上,我需要一种全局删除网站上所有工具提示的方法.
<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>
button元素不再包含md-tooltip,否则我只需删除tooltip元素.
想要这样做的原因是因为在移动设备上,md-tooltip会点击按钮.因此,在第一次单击时显示工具提示,然后单击第二次单击时按钮单击操作.这绝对不是理想的效果.
解决方法
好的,所以我早些时候成功实施了我的建议,这是
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中的指令字很重要,对于我们想要为指令而不是服务选择它的角度来说.
我没有看到他们的文档提到如何做到这一点.
我可以通过两种方式来解决这个问题.
> display：none all< md-tooltip>如果你在移动设备上>覆盖mdTooltip指令然后有条件地$编译原始的md-tooltip或空白的(如果你在移动设备上)
