在自定義事件上隱藏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;                                   
 };

})

http://jsfiddle.net/3ywMd/

工具提示必須在第一次點擊時關閉，而不是第二次關閉。 如果用戶點擊div，任何想法如何關閉工具提示？

Answer 1

我試過@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指令的實際內部，因此您沒有前一解決方案的令人討厭的副作用。

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;
 };                                    
})

Answer 3

邁克爾的解決方案讓我有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);
}

Answer 4

為了將來的參考，接受的答案angular.element('.yourTooltip').scope().tt_isOpen將無法在新版本中工作，因為工具提示已被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);
}