11

我一直在环顾四周并尝试不同的东西，但无法弄清楚。是否可以隐藏某个事件的 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;                                   
 };

})

http://jsfiddle.net/3ywMd/

工具提示必须在第一次点击时关闭，而不是在第二次点击时关闭。如果用户单击 div，知道如何关闭工具提示吗？

4

4 回答 4

6

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

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

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

然后在您的 JavaScript 中，您可以随时触发“点击”事件来关闭您的工具提示。确保在触发事件之前工具提示实际上是打开的。

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

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

于 2014-05-09T18:34:19.037 回答
4

迈克尔的解决方案让我完成了 90% 的工作，但是当我执行代码时，角度响应“$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);
}
于 2014-09-30T20:32:08.997 回答
4

基本上你不能使用工具提示触发器来完成这项工作。在深入挖掘 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;
 };                                    
})
于 2014-01-23T17:35:47.130 回答
1

供将来参考，已接受的答案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);
}
于 2015-08-20T07:21:23.380 回答