在自定義事件中隱藏角UI工具提示

Question

我一直在環顧四周，嘗試不同的事情，但無法弄清楚。是否可以隱藏一個特定事件的角度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

我試圖@設置$scope.tt_isOpen = false的shidhin鉻的建議，但它有相當顯著的問題，雖然提示不淡出，它仍然存在於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的工具提示指令的實際內部，你沒有以前的解決方案的討厭的副作用。

Answer 2

基本上你不能玩工具提示觸發器來使這項工作。在挖掘了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％的方式，但是當我執行代碼時，角度響應「$摘要已在進行中」。我只是在超時時間內將觸發器包裹起來。可能不是最好的解決辦法，但需要最少的代碼

// ... 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不會在新版本的提示已經取得了不可觀測工作。因此，整個tootlip從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); 
}