通过 tooltip-is-open 属性隐藏工具提示不起作用

Question

我想显示一个可点击的元素（一个很棒的字体图标），它将一些数据复制到剪贴板。当点击事件发生时，我还想显示一个工具提示，一旦光标离开（鼠标离开）元素，该工具提示就会消失。

这个元素是一个指令，因为我在我的应用程序中多次使用它。

复制数据根本不是问题，也不显示工具提示。但是，当鼠标离开字体真棒图标时，它不会消失。

为了解决这个问题，首先我将 scope.tooltipIsOpen 设置为 true，并且正如预期的那样，它默认显示工具提示。

然后我在代码中放了一些 $log.info 来查看值是否更新为 false。似乎该值已更新。我还检查了事件是否被触发并且它们是。我假设视图没有按应有的方式更新，因此工具提示仍然显示。我最终尝试在 post 函数中放置一个 scope.$apply() ，但没有成功。

这是我的指令：

 app.directive('toClipboard',
    ['$log', 'ngClipboard',
    function ($log, ngClipboard) {
        function compile(element, attrs) {
            return {
                pre: function (scope, element, attrs) {
                   if (!attrs.tooltipPlacement) {
                        attrs.tooltipPlacement = 'auto top';
                    }
                },
                post: function (scope, element) {
                    scope.copy = ngClipboard.toClipboard;

                    // Tooltip hidden by default.
                   scope.tooltipIsOpen = false;

                    // Hiding tooltip.
                    element.on('mouseenter', function () {
                        scope.tooltipIsOpen = false;
                    });

                    // Hiding tooltip.
                    element.on('mouseleave', function () {
                        scope.tooltipIsOpen = false;
                    });
                }
            }
        }


        return {
            restrict: 'A',
            replace: true,
            scope: {
                'clipboardData': '@',
                'tooltipPlacement': '@'
            },
            compile: compile,
            templateUrl: 'elements/_span-clipboard.html'
        };
    }
]);

注意：ngClipboard 是将数据复制到剪贴板的服务。

这是相关的 HTML 模板：

<span>
    <i class="fa fa-copy clickable"
       uib-tooltip="Copied"
       tooltip-placement="tooltipPlacement"
       tooltip-is-open="tooltipIsOpen"
       tooltip-trigger="'click'"
       ng-click="copy(clipboardData)"></i>
</span>

您有解决此问题的任何想法或线索吗？

提前谢谢你，

Plunker：https://plnkr.co/edit/okzxdSz1VvbkycehMT2G?p=preview

Answer 1

我设法通过将我的代码包装在 $timeout(); 中来完成这项工作。这是工作代码：

app.directive('toClipboard',
    ['$log', '$timeout', 'ngClipboard',
        function ($log, $timeout, ngClipboard) {
            function compile(element, attrs) {
                return {
                    pre: function (scope, element, attrs) {
                        if (!attrs.iconClass) {
                            attrs.iconClass = 'fa-copy';
                        }

                        if (!attrs.iconColorClass) {
                            attrs.iconColorClass = 'text-primary';
                        }

                        if (!attrs.tooltipPlacement) {
                            attrs.tooltipPlacement = 'auto top';
                        }
                    },
                    post: function (scope, element) {
                        scope.copy = ngClipboard.toClipboard;

                        // Tooltips hidden by default.
                        scope.tooltipIsOpen = false;

                        // Hiding tooltips on mouseenter event.
                        element.on('mouseenter', function () {
                            $timeout(
                                function() {
                                    scope.tooltipIsOpen = false;
                                }, 200
                            );

                        });

                        // Hiding tooltips on mouseleave event.
                        element.on('mouseleave', function () {
                            $timeout(
                                function() {
                                    scope.tooltipIsOpen = false;
                                }, 200
                            );
                        });
                    }
                }
            }


            return {
                restrict: 'A',
                replace: true,
                scope: {
                    'iconClass': '@',
                    'iconColorClass': '@',
                    'clipboardData': '@',
                    'tooltipPlacement': '@'
                },
                compile: compile,
                templateUrl: 'elements/_span-clipboard.html'
            };
        }
    ]
);

$timeout 确保它在我猜的 $apply 周期内运行。