Скрытие всплывающей подсказки с помощью атрибута всплывающей подсказки не работает

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

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

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

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

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

NB: 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


angularjs twitter-bootstrap-tooltip angular-ui-bootstrap
person Cybermate    schedule 02.01.2019    source источник
comment
Привет, Cybermate. Я вижу в вашем объекте области, что у вас есть только 'clipboardData': '@','tooltipPlacement': '@', попробуйте добавить нужные значения с двухсторонней привязкой.   -  person Aaron Rabinowitz    schedule 02.01.2019
comment
Насколько я понимаю, вы хотите, чтобы я добавил 'tooltipIsOpen': '='? Я сделаю это завтра, пока я дома, но я могу попробовать с плункером.   -  person Cybermate    schedule 02.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

Мне удалось заставить это работать, обернув мой код в $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.

person Cybermate    schedule 03.01.2019