如何使用角度材质动态删除“md-tooltip”

How to dynamically remove a `md-tooltip` with Angular Material?

本文关键字：删除 md-tooltip 动态 何使用      更新时间：2023-09-26

我有一个基本的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吃了按钮点击。因此，在第一次单击时显示工具提示，在第二次单击时显示按钮单击操作。这绝对不是一个理想的效果。

如何从页面上的所有元素中删除所有工具提示，以便我的按钮单击操作是第一次单击/点击而不是第二次？

好的

，所以我之前已经成功地实现了我的建议，这是演示

我创建了另一个版本的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所有<md-tooltip>如果您在移动设备上。
  2. 覆盖 mdTooltip 指令，然后有条件地$compile原始 MD 工具提示或空白工具提示（如果您在移动设备上）
HTML
<md-tooltip md-direction="bottom"  class="tooltip">Tooltip Bottom</md-tooltip>
CSS
@media(max-width:599px) {
md-tooltip.tooltip {
        display: none !important;
    }
}

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

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

对于此任务，您可以使用ng-device-detector库：

相关文章：