Угловой пользовательский интерфейс $ tooltipProvider setTriggers

Question

Я пытаюсь просто добавить новый набор триггеров (показать и скрыть) в мои подсказки с угловым пользовательским интерфейсом. Однако они не работают. Как мне это сделать? Вот plunker:

http://plnkr.co/edit/ihy7PcB2kwvlJgC1QZ9p?p=preview

Соответствующий код:

var app = angular.module('plunker', ['ui.bootstrap']) 
.config(['$tooltipProvider', function($tooltipProvider){ 
$tooltipProvider.setTriggers({ 
    'show': 'hide' 
}); 
}]); 

Спасибо!

Answer 1

Я updated your Plunker, чтобы заставить его работать, делая два ключевых изменения:

Dependency Order

Изменение порядка загрузки зависимостей для загрузки JQuery перед другими сценариями. Я не знаю точно, почему это имеет значение, но это так. До:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> 
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script> 
<script src="script.js"></script> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
<link rel="stylesheet" href="style.css" /> 

После:

<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> 
<script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script> 
<script src="script.js"></script> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
<link rel="stylesheet" href="style.css" /> 

Использование тайм-аута

Срабатывание события на тайм-аут, метод, используемый в демонстрационном упоминаемый ниже. Без таймаута я получаю угловую ошибку $apply already in progress.

app.controller('MainCtrl', function($scope, $timeout) { 
    $scope.runmef = function(eventName) { 
    $timeout(function() { 
     console.log("Toggling tooltip: " + eventName); 
     $("#myid").trigger(eventName); 
    }, 0); 
    } 
}); 

Справочник

Вдохновением для этого был custom tooltip event Plunker ссылка в Angular-UI issue discussion. Я рекомендую это.