在自定义事件中隐藏angular-ui工具提示

Question

我一直在寻找和尝试不同的方法，但是无法解决问题。是否有可能使用特定事件隐藏Angular-UI工具提示？

我想做的是当有人悬停在一个div上时显示一个工具提示，并在用户单击它时关闭它，因为我将显示另一个弹出窗口。我尝试使用自定义触发事件，但似乎无法使其工作。我创建了这个：

<div ng-app="someApp" ng-controller="MainCtrl" class="likes" tooltip="show favorites"     tooltip-trigger="{{{true: 'mouseenter', false: 'hideonclick'}[showTooltip]}}" ng-click="doSomething()">{{likes}}</div>

var app = angular.module('someApp', ['ui.bootstrap']);

app.config(['$tooltipProvider', function($tooltipProvider){
 $tooltipProvider.setTriggers({
  'mouseenter': 'mouseleave',
  'click': 'click',
  'focus': 'blur',
  'hideonclick': 'click'
 });
}]);

app.controller('MainCtrl', function ($scope) {
 $scope.showTooltip = true;
 $scope.likes = 999;

 $scope.doSomething = function(){
    //hide the tooltip
    $scope.showTooltip = false;                                   
 };

})

如何在用户单击div时关闭工具提示，而不是第二次单击？ 有什么想法吗？http://jsfiddle.net/3ywMd/

- Mikel Porras Hoogland

---

你可以将tooltipProvider触发器映射更改为包括'mouseenter': 'mouseleave click'。请参见：http://stackoverflow.com/a/23388638/1455709 - Patrick

Answer 1

我尝试了@shidhin-cr的建议，即设置$scope.tt_isOpen = false，但是它有一个相当重要的问题，即虽然工具提示会淡出，但它仍然存在于DOM中（并处理指针事件！）。因此，即使用户看不到它，工具提示也可能阻止用户与之前位于工具提示后面的内容进行交互。

我发现更好的方法是简单地在工具提示目标上触发用作工具提示触发器的事件。因此，例如，如果您有一个作为工具提示目标的按钮，并且通过单击触发...

<button id="myButton"
        tooltip="hi"
        tooltip-trigger="click">
</button>

然后在你的JavaScript中，任何时候，你都可以触发“click”事件来关闭你的工具提示。确保在触发事件之前工具提示是打开的。

// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('#myButton').scope().tt_isOpen) {
    angular.element('#myButton').trigger('click');
}

由于这会触发AngularUI的Tooltip指令的实际内部操作，因此您不会遇到先前解决方案的不良副作用。

- Michael Cook

Answer 2

基本上，您无法使用 tooltip-trigger 使其正常工作。经过对 ToolTip 指令代码的深入研究，我发现 ToolTip 属性公开了一个名为 tt_isOpen 的作用域属性。

因此，在您的 ng-click 函数中，如果将该属性设置为 false，则会使工具提示隐藏。

请参见此处的更新演示 http://jsfiddle.net/3ywMd/10/ 就像这样。

app.controller('MainCtrl', function ($scope) {
 $scope.likes = 999;
 $scope.doSomething = function(){
    //hide the tooltip
    $scope.tt_isOpen = false;
 };                                    
})

- Shidhin Cr

---

在这个例子中，为什么.controller要放在var app = angular.module('someApp', ['ui.bootstrap']);之外？ - Danny Mahoney

Answer 3

Michael的解决方案基本上让我做到了90％，但是当我执行代码时，Angular响应“$digest已经在进行中”。 我只是在触发器中包装了一个超时。可能不是最好的解决方案，但需要编写的代码很少。

// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('#myButton').scope().tt_isOpen) {
    $timeout( function(){
        angular.element('#myButton').trigger('click');
    }, 100);
}

- liteflier

Answer 4

为了以后参考，已接受的答案angular.element('.yourTooltip').scope().tt_isOpen在新版本中将不起作用，因为工具提示已被设置为不可观察。因此，整个工具提示从DOM中删除。简单的解决方案是仅检查工具提示是否存在于DOM中。

借鉴@liteflier的答案，

// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('.yourTooltip').length) { //if element is present in DOM
    setTimeout( function(){
        //Trigger click on tooltip container
        angular.element('.yourTooltipParent').trigger('click');
    }, 100);
}

- RijulB