有什么方法可以通过单击外部来关闭 Angular UI 工具提示？答案

【问题标题】：Is there any way to close Angular UI tooltip by clicking outside it?有什么方法可以通过单击外部来关闭 Angular UI 工具提示？
【发布时间】：2015-04-13 17:25:50
【问题描述】：

为了获得这种能力，我扩展了工具提示提供程序。

function customTooltip($document, $tooltip) {
    var tooltip = $tooltip('customTooltip', 'customTooltip', 'click'),
        parentCompile = angular.copy(tooltip.compile);

    tooltip.compile = function (element, attrs) {
        var parentLink = parentCompile(element, attrs);

        return function postLink(scope, element, attrs) {
            var firstTime = true;

            parentLink(scope, element, attrs);

            var onDocumentClick = function () {
                if (firstTime) {
                    firstTime = false;
                } else {
                    element.triggerHandler('documentClick');
                }
            };

            var bindDocumentClick = function () {
                $document.on('click', onDocumentClick);
            };

            var unbindDocumentClick = function () {
                $document.off('click', onDocumentClick);
            };

            scope.$watch('tt_isOpen', function (newValue) {
                firstTime = true;

                if (newValue) {
                    bindDocumentClick();
                } else {
                    unbindDocumentClick();
                }
            });

            scope.$on('$destroy', function onTooltipDestroy() {
                unbindDocumentClick();
            });
        };
    };

    return tooltip;
}

但是这种方法已经不起作用了，因为现在范围内没有 tt_isOpen 属性。实际上我看不到任何工具提示属性，只有我的父范围。我猜这是因为 tooltip.js 124 行 https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js#L124 的变化而发生的。现在有什么方法可以通过在工具提示外部单击或至少获取 isOpen 标志来关闭工具提示？

【问题讨论】：

也许这会有用：stackoverflow.com/a/50114361/4572425

标签： javascript angularjs angular-ui angular-ui-bootstrap

【解决方案1】：

有一个pull request 为工具提示和弹出框实现了outsideClick 触发器。它将包含在angular-ui 1.0.0中，预计年底发布。一旦实现，您就可以简单地将tooltip-trigger="outsideClick" 添加到您的元素中。

【讨论】：

【解决方案2】：

有一个开放的拉取请求Here 添加此功能。您可以尝试的 hack 解决方法是禁用然后启用触发器元素，因为指令将调用此方法：

        attrs.$observe( 'disabled', function ( val ) {
          if (val && ttScope.isOpen ) {
            hide();
          }
        });

【讨论】：

【解决方案3】：

此变体适用于 angular 1.3.15 和 angular-ui 版本 0.13

function customTooltip($document, $tooltip) {
    var tooltip = $tooltip('customTooltip', 'customTooltip', 'click'),
        parentCompile = angular.copy(tooltip.compile);

    tooltip.compile = function (element, attrs) {

        var parentLink = parentCompile(element, attrs);

        return function postLink(scope, element, attrs) {

            parentLink(scope, element, attrs);

            var isOpened = false;

            element.bind('click', function () {
                bindDocumentClick();
            });

            var onDocumentClick = function () {
                if (!isOpened) {
                    isOpened = true;
                } else {
                    element.triggerHandler('documentClick');
                    unbindDocumentClick();
                    isOpened = false;
                }
            };

            var bindDocumentClick = function () {
                $document.on('click', onDocumentClick);
            };

            var unbindDocumentClick = function () {
                $document.off('click', onDocumentClick);
            };

            scope.$on('$destroy', function onTooltipDestroy() {
                unbindDocumentClick();
            });
        };
    };

    return tooltip;
}

【讨论】：