来自控制器的 md 工具提示显示

Question

我有一个与当前隐藏的段落关联的工具提示，我想在我的控制器中发生事件后显示它。

我的 html 代码是 -

  <div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
    <p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.
      <md-tooltip hide md-direction="left">
        Refresh
      </md-tooltip>     
    </p>  
  </div>

我的控制器代码是 -

  angular
  .module('starterApp')
  .controller('DemoCtrl', DemoCtrl);


function DemoCtrl($mdDialog,$mdToast) {
    var self = this;
    //I want to show the tooltip from here.
    //if(event) mdTooltip.show()


  }

这个问题不是的重复问题，因为我没有 data-trigger="hover" 这样的触发器。触发器将基于另一个事件来自控制器内部。

Answer 1

我会在控制器中创建一个方法来设置一个值，比如 showTooltip。当事件触发时，它将 showToottip 设置为 true/false。然后 show/hide 使用 ng-show="showTooltip"

的工具提示

angular
    .module('starterApp')
    .controller('DemoCtrl', DemoCtrl);


function DemoCtrl($mdDialog, $mdToast) {
    var self = this;
    //I want to show the tooltip from here.
    //if(event) mdTooltip.show()

    self.showTooltip = false;

    self.changeTooltipStatus = function (status) {
        self.showTooltip = status
    }
}

然后在你的 HTML 中做这样的事情

<md-tooltip ng-show="showTooltip" md-direction="left">
    Refresh
</md-tooltip>

Answer 2

您可以使用 md-tooltip md-visible 属性来完成。请参阅文档 here。

按如下方式设置工具提示：

<p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.
  <md-tooltip ng-if="showTooltip" md-visible="showTooltip" md-direction="left">
    Refresh
  </md-tooltip>     
</p>

You can see a working plunker here.

希望对您有所帮助

来自控制器的 md 工具提示显示

md tooltip show from controller

angularjs

angular-material