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

我有一个基本的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或空白的(如果你在移动设备上)

原文地址：https://www.jb51.cc/js/156780.html