如何使用Angular材料动态删除`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]];

});

该Directive字mdTooltipDirective是很重要的,对角度说,我们要选择它的指令不是一种服务.

编辑:我添加了一个链接函数,并删除了由重写指令放置的元素

我没有看到他们的文档提到如何做到这一点.

我可以通过两种方式来解决这个问题.

1. display: none所有,<md-tooltip>如果你在移动设备上.
2. 覆盖mdTooltip指令然后有条件$compile地原始md-tooltip或空白(如果你在移动设备上)