为什么 md 工具提示不适用于 md 虚拟选项卡

Question

我正在使用 angular material。

当我创建自己的指令并将其添加到 md-tab-label 时，例如

<md-tab-label>
<custom-directive>
Label
</cutom-directive>
</md-tab-label>

然后自定义指令也应用于某些 "md-dummy-tab"。

但是如果我将 mdtooltop 给 md-tab-label ，就像

<md-tab-label>
Label
<md-tooltip>Label</md-tooltip>
</md-tab-label>

然后没有 md-tooltip 应用于 "md-dummy-tab" class

我尝试在 mdtooltip 代码中搜索，但找不到任何线索。

https://github.com/angular/material/blob/master/src/components/tooltip/tooltip.js

如何对我的自定义指令执行相同的操作，即自定义指令不应应用于 md 虚拟选项卡？

Answer 1

<md-tooltip> 不会附加到 <md-dummy-tab>，因为它不会在 <md-tab-label> 中呈现任何 HTML 代码。它的模板会在您触发工具提示显示时附加到最近的父级 <md-content>。

  scope.$watch('visible', function (isVisible) {
    if (isVisible) showTooltip();
    else hideTooltip();
  });

-

function showTooltip() {
  // Insert the element before positioning it, so we can get the position
  // and check if we should display it
  tooltipParent.append(element);

  // Check if we should display it or not.
  // This handles hide-* and show-* along with any user defined css
  if ( hasComputedStyleValue('display','none') ) {
    scope.visible = false;
    element.detach();
    return;
  }

  positionTooltip();
  angular.forEach([element, background, content], function (element) {
    $animate.addClass(element, 'md-show');
  });
}

-

current       = getNearestContentElement(),
tooltipParent = angular.element(current || document.body)

-

 function getNearestContentElement () {
   var current = element.parent()[0];
   // Look for the nearest parent md-content, stopping at the rootElement.
   while (current && current !== $rootElement[0] && current !== document.body) {
     current = current.parentNode;
   }
   return current;
 }

为什么 md 工具提示不适用于 md 虚拟选项卡

Why md tooltip is not applied to md dummy tab

javascript

angularjs

angular-material