Скрыть angular -ui подсказку по пользовательскому событию

Я искал разные вещи, но не мог понять. Можно ли скрыть подсказку 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?

Ответы

Ответ 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, у вас нет неприятных побочных эффектов предыдущего решения.

Ответ 2

В принципе, вы не можете играть с подсказкой-подсказкой, чтобы сделать эту работу. После копания кода директивы ToolTip я обнаружил, что атрибут ToolTip предоставляет атрибут scope, называемый 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;
 };                                    
})

Ответ 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);
}

Ответ 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);
}