【发布时间】：2017-07-13 11:56:21
【问题描述】：
我正在使用https://angular-ui.github.io/bootstrap/ 在使用 AngularJS 开发的 html 页面中显示工具提示。我可以访问 tooltip-is-open 属性来显示和隐藏工具提示。但是我无法使用自定义指令来实现相同的目标。
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button tooltip-placement="auto" uib-tooltip="Hide/show tooltip using directive" tooltip-trigger="'click'" tooltip-is-open="true" tooltip-auto-hide>Button 1</button>
<button tooltip-placement="right" uib-tooltip="Hide/show tooltip using controller" tooltip-trigger="'click'" tooltip-is-open="showHidett" tooltip-auto-hide>Button 2</button>
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
app.controller('myCtrl', function($scope,$timeout) {
$scope.showHidett = true;
$timeout(function () {
$scope.showHidett = false;
}, 2000);
});
app.directive('tooltipAutoHide',function($timeout){
return {
restrict: 'A',
scope:{
tooltipIsOpen :'='
},
link: function(scope, element, attrs){
element.on('mouseenter', function () {
scope.tooltipIsOpen = true;
$timeout(function () {
scope.tooltipIsOpen = false;
}, 2000);
});
element.on('mouseleave', function () {
scope.tooltipIsOpen = false;
});
}
};
});
</script>
</body>
</html>
当我运行代码时，由控制器管理的 Button2 的工具提示触发器正在工作，但由指令管理的 Button1 的工具提示触发器不工作。工作示例发布在以下 plunker 链接https://plnkr.co/edit/0bwCpPVYDAUiQkW6oIu3?p=preview
【问题讨论】：
-
你能给个工作小提琴吗？
-
你可以在这里找到 plunker 链接plnkr.co/edit/0bwCpPVYDAUiQkW6oIu3?p=preview
标签： angularjs twitter-bootstrap