Скрытие подсказки через атрибут tooltip-is-open не работает

Question

Я хочу отобразить кликабельный элемент (потрясающий значок шрифта), который копирует некоторые данные в буфер обмена.Когда происходит событие щелчка, я также хочу отобразить всплывающую подсказку, которая должна исчезнуть, как только курсор покинет (mouseleave) элемент.

Этот элемент является директивой, поскольку я использую его несколько раз в своем приложении.

Копирование данных не является проблемой, при этом отображается подсказка.Тем не менее, он не исчезает, когда мышь покидает значок шрифта.

Чтобы это исправить, сначала я установил для scope.tooltipIsOpen значение true, и, как и ожидалось, он отображал подсказки по умолчанию.

* 1008Затем я вставил в код файл $ log.info, чтобы узнать, было ли значение обновлено до false.Кажется, что значение обновляется.Я также проверил, были ли события вызваны, и они есть.Я предполагаю, что представление не обновляется должным образом, поэтому подсказка остается отображаемой.В конце концов я попытался вставить область. $ 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, я думаю.