Question

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

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

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

要解决此问题，请首先将scope.tooltipIsOpen设置为true，并按预期显示默认情况下的工具提示。

然后我在代码中放入一些$ log.info以查看该值是否已更新为false。似乎值已更新。我还检查了事件是否已触发，是否触发了。我认为视图不会更新，因此工具提示将保持显示状态。我最终尝试将scope。$ apply（）放入post函数中，但没有成功。

这是我的指令：

 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>

您是否有解决此问题的想法或线索？

先谢谢您

柱塞：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周期内运行。

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

1 个答案: