AngularJS + Bootstrap-UI: всплывающая подсказка не скрывается, когда кнопка отключена

Я создаю веб-приложение, используя AngularJS + Twitter Bootstrap и Bootstrap-UI. Когда я помещаю всплывающую подсказку на кнопку, она отображается должным образом; но если кнопка становится отключенной (нижележащим контроллером) после нажатия и всплывающая подсказка отображается, всплывающая подсказка не скрывается и остается там навсегда. Вот репродукция:

Plunker: http://embed.plnkr.co/numlaAuLOxh3a03Z7O85/preview

Просто наведите указатель мыши на кнопку, чтобы появилась всплывающая подсказка, а затем щелкните по ней. Кнопка отключена, и всплывающая подсказка остается там. Как я могу избежать такого поведения и правильно скрыть свои подсказки?


angularjs twitter-bootstrap angular-ui-bootstrap
person Naftis    schedule 10.04.2014    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Я обнаружил, что простая замена кнопок на якорные теги у меня отлично сработала.

<a role="button" type="button" class="btn btn-danger" 
    ng-click="someAction()" tooltip="Tooltip" ng-disabled="isDisabled">
      <span class="glyphicon glyphicon-minus"></span>
</a>
person devman81    schedule 24.11.2014
comment
Спасибо, похоже, это помогает, даже если я еще не проверял последние версии Angular + Bootstrap. - person Naftis; 24.11.2014
comment
Вы спасли Мой день :) спасибо за ваше время и старания - person Ahmed Mahmoud; 03.06.2015
comment
disabled="", созданный ng-disabled="", не поддерживается тегами <a> - person Blowsie; 12.10.2017

arrow_upward
2
arrow_downward

Просматривая проблемы с GitHub, я обнаружил предложение (похоже, связано с проблема, открытая вами?), чтобы использовать элемент оболочки, вокруг которого есть всплывающая подсказка: http://jsfiddle.net/RWZmu/

<div style="display: inline-block;" tooltip="My Tooltip">
  <button class="navbar-btn btn-danger" ng-click="test()" ng-disabled="isDisabled" tooltip="Here's the tip">
    <i class="glyphicon glyphicon-forward"></i>
  </button>
</div>
person Michael Vashchinsky    schedule 29.05.2014
comment
Спасибо! Я разместил это на GitHub: github.com/angular-ui/bootstrap/issues/2059 Тем не менее, в настоящее время, похоже, нет решения, кроме как обернуть потенциально отключенный элемент и переместить всплывающую подсказку наружу. В любом случае это приводит к неоптимальному росту разметки HTML только для того, чтобы правильно обрабатывать подсказку ... - person Naftis; 29.05.2014

arrow_upward
0
arrow_downward

Используйте здесь следующую логику

HTML

 <div ng-app="someApp" ng-controller="MainCtrl" 
 class="likes" tooltip="show favorites" tooltip-trigger="mouseenter"
 ng-click="doSomething()">{{likes}}</div>

JS

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.likes = 999;
$scope.doSomething = function(){
    //hide the tooltip
    $scope.tt_isOpen = false;
};

})

Соус

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

http://jsfiddle.net/3ywMd/10/

person chrishollinworth    schedule 10.04.2014
comment
Спасибо, я попытался добавить код app.config плюс инструкцию tt_isOpen (даже если это звучит немного сложно и заставляет мой контроллер позаботиться о проблемах с визуализацией); пока что, похоже, это не работает. Обновленный plunkr: embed.plnkr.co/numlaAuLOxh3a03Z7O85/preview. Я что-то пропустил? - person Naftis; 10.04.2014