[英]Angular UI $tooltipProvider setTriggers
I am trying to just add a new set of triggers (show and hide) to my Angular UI tooltips. 我试图将一组新的触发器(显示和隐藏)添加到我的Angular UI工具提示中。 However, they do not work.
但是,它们不起作用。 How should I go about this?
我应该怎么做? Here is a plunker:
这是一个矮人:
http://plnkr.co/edit/ihy7PcB2kwvlJgC1QZ9p?p=preview http://plnkr.co/edit/ihy7PcB2kwvlJgC1QZ9p?p=预览
Relevant code is: 相关代码为:
var app = angular.module('plunker', ['ui.bootstrap'])
.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'show': 'hide'
});
}]);
Thanks! 谢谢!
I updated your Plunker to make it work, making two key changes: 我对您的Plunker进行了更新 ,使其能够正常运行,并进行了两个关键更改:
Dependency Order 依存顺序
Changing the dependency load order to load jQuery before the other scripts. 更改依赖项加载顺序以在其他脚本之前加载jQuery。 I do not know exactly why that makes a difference, but it does.
我不知道为什么会有所作为,但是确实如此。 Before:
之前:
<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" />
After: 后:
<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" />
Using Timeout 使用超时
Firing the event on timeout, a technique used in the demo referenced below. 超时触发事件,这是下面引用的演示中使用的一种技术。 Without the timeout, I get an Angular error
$apply already in progress
. 没有超时,我得到了一个Angular错误
$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);
}
});
Reference 参考
The inspiration for this was a custom tooltip event Plunker referenced in an Angular-UI issue discussion . 灵感来自于在Angular-UI问题讨论中引用的自定义工具提示事件Plunker 。 I recommend it.
我推荐它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.