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

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

Answer 1

好的，所以我已经成功地实施了我之前的建议，这里是DEMO

我创建了另一个版本的 md-tooltip 只是为了覆盖 angular material 的版本。然后我创建了一个 angular.decorator 来选择 md-tooltip 将 angular 使用的指令版本。

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我们想要select它是为了指令而不是服务。

编辑：我添加了一个 link 函数并删除了覆盖指令

放置的元素

我在他们的文档中没有看到任何关于如何执行此操作的提及。

我可以想到两种方法来解决这个问题。

display: none 所有 <md-tooltip> 如果您使用的是移动设备。
覆盖 mdTooltip 指令然后有条件地 $compile 原始的 md-tooltip 或空白的（如果你在移动设备上）

Answer 2

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

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

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

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

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

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

javascript

angularjs

angular-material