Angularjs 如何自动隐藏ui引导工具提示_Angularjs_Twitter Bootstrap

Angularjs 如何自动隐藏ui引导工具提示

angularjs twitter-bootstrap

Angularjs 如何自动隐藏ui引导工具提示,angularjs,twitter-bootstrap,Angularjs,Twitter Bootstrap,我正在使用AngularJS开发的html页面中显示工具提示。我可以访问“工具提示是否打开”属性以显示和隐藏工具提示。但我无法使用自定义指令实现同样的功能 <!DOCTYPE html> <html lang="en-US"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <script src=

我正在使用AngularJS开发的html页面中显示工具提示。我可以访问“工具提示是否打开”属性以显示和隐藏工具提示。但我无法使用自定义指令实现同样的功能

<!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>


按钮1
按钮2
var-app=angular.module（'myApp'，['ngAnimate'，'ngSanitize'，'ui.bootstrap']）；
app.controller（'myCtrl'，函数（$scope，$timeout）{
$scope.showHidett=true；
$timeout（函数（）{
$scope.showHidett=false；
}, 2000);
});
app.directive（'ToolTiputHide'，函数（$timeout）{
返回{
限制：“A”，
范围：{
工具提示页：'='
},
链接：函数（范围、元素、属性）{
on（'mouseenter'，function（）{
scope.tooltipIsOpen=true；
$timeout（函数（）{
scope.tooltipIsOpen=false；
}, 2000);
});
on（'mouseleave'，function（）{
scope.tooltipIsOpen=false；
});
}
};
});

当我运行代码时，由控制器管理的Button2的工具提示触发器工作，但由指令管理的Button1的工具提示触发器不工作。根据的指南，工作示例发布在以下plunker链接中

您可以使用

工具提示弹出关闭延迟

指令应用隐藏延迟，和

工具提示触发器

接受由空格分隔的多个值，如

鼠标点击

无需绑定外部鼠标输入事件

请参阅这些属性的定义，

你能给我一把工作小提琴吗？你可以在这里找到plunker链接工具提示弹出关闭延迟用于延迟隐藏工具提示，而不是隐藏工具提示。我手动覆盖触发器只是为了在特定时间间隔后显示隐藏时的工具提示。是否要在单击或悬停时打开工具提示？在使用隔离范围时，您可能没有像这样设置值直接赋值

tooltip is open=“tooltipIsOpen”