如何使用 Angular Material 动态删除“md-tooltip”？

Question

我有一个基本的md-button，里面有一个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>

按钮元素不再包含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 词很重要，告诉 Angular 我们想为指令而不是服务选择它。

编辑：我添加了一个链接函数并删除了覆盖指令放置的元素

---

我在他们的文档中没有看到任何关于如何做到这一点的提及。

有两种方法可以解决这个问题。

1. display: none all <md-tooltip> 如果您使用的是移动设备。
2. 覆盖 mdTooltip 指令，然后有条件地 $compile 原始 md 工具提示或空白提示（如果您在移动设备上）

Answer 2

HTML

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

CSS

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

Answer 3

根据这个issue，md-tooltip 是错误代码。

在这种情况下，我建议您根据条件显示工具提示代码，即仅在您使用网络浏览器时显示内容。

对于这个任务，你可以使用ng-device-detector lib：