Question

使用ng-mouseover / ng-mouseleave和tooltip-is-open来设置工具提示的状态，我可以创建一个在悬停时仍然打开的工具提示

然而，当我尝试使用

将其重构为指令时

        element.on('mouseover', hoverIn);
        element.on('mouseleave', hoverOut);

事件触发但当鼠标悬停在工具提示区域时，工具提示仍然关闭

这是

的吸引者

https://plnkr.co/edit/6U2Dge8srf8C8SRNkPVK?p=preview

编辑：使用ng-mouseover / ng-mouseleave，当鼠标离开父div进入孩子时，它会闪烁，因此非常欢迎任何改善这两者的建议，谢谢。

Answer 1

我找到了您的问题的解决方案。这是范围更新的问题，因此您可以使用$apply强制更新您的范围您可以更改hoverIn和hoverOut功能

hoverIn = function () {
    scope.tooltipState = true; // remove isOpen from here
    scope.$apply(); // force to apply scope
    console.log("Event Fired");
};

hoverOut = function () {
    scope.tooltipState = false; // remove isOpen from here
    scope.$apply(); // force to apply scope
    console.log("Event Fired");
};

这是更新plnkr update plnkr

使用tooltip-is-open的Hoverable / clickable工具提示不在指令中工作

1 个答案: