javascript - 有什么方法可以通过单击外部来关闭 Angular UI 工具提示吗?

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

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

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 标志来关闭工具提示吗?

最佳答案

有一个pull request为工具提示和弹出窗口实现 outsideClick 触发器。它将包含在angular-ui 1.0.0中,预计年底发布。实现后,您只需将 tooltip-trigger="outsideClick" 添加到您的元素即可。

关于javascript - 有什么方法可以通过单击外部来关闭 Angular UI 工具提示吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29611355/

相关文章:

angularjs - 为什么 md-tab-body 不能跨越整个屏幕

javascript - 跨域问题 - api 与前端的域不同

javascript - AngularUI-Bootstrap 的 Typeahead 无法读取 `length` `undefined` 的属性

javascript - 有没有办法从 Angular UI 嵌套命名 View 访问父范围?

javascript - 如何从 Angular.js 中的 index.html 页面调用指令中的函数

javascript - 如何读取浏览器不支持的 CSS 属性?

javascript - 使用 JS 遍历 SVG

javascript - 如何在 javascript、javaservlets、mysql 和 back 中使用 utf8?

javascript - 打开后一秒显示 Angular UI 模态

javascript - 将两个正则表达式分组在一起