Javascript 我无法动态隐藏UI引导'；自定义指令中的s popover指令[AngularJS]

我正在创建一个自定义AngularJS指令，它将允许用户选择一系列文本，并在文本选择中添加注释/注释，类似于

在我的指令的

link

函数中，有两个事件处理程序。当用户单击自定义指令时，第一个（下面）将激发。我正在使用UI引导的指令，并将其添加到span元素中以显示一个popover

element.on('click', function () {
    if (!isPopoverActive) {
        selectedRangeId = generateRandomString(10);

        // wrap the selected range in a span element and 
        // give it a generated random ID
        highlightElement(selectedRangeId);

        if (elementExists(selectedRangeId)) {
            highlightedElement = getElementById(selectedRangeId);

            // Add UI Bootstrap's popover directive attributes to the element
            highlightedElement.attr('uib-popover-template', "'directives/my.directive/my.directive.tpl.html'");
            highlightedElement.attr('popover-is-open', true);
            highlightedElement.attr('popover-placement', 'right');
            highlightedElement.attr('popover-trigger', 'manual');
            highlightedElement.attr('popover-title', 'Comment');

            $compile(highlightedElement)(scope);

            isPopoverActive = true;
        }
    }
});

第二个（下面）在当前页面的任何位置触发

mouseup

事件。如果单击的元素在popover之外，我想再次隐藏popover，但这不起作用。检查“我的浏览器”中的元素时发现，

弹出窗口处于打开状态，

属性值在

span

上发生更改，但页面上没有发生任何变化

$document.on('mouseup', function (event) {
    var clickedElement = event.toElement;

    if (isPopoverActive && clickedElement.id !== selectedRangeId && !isDescendant('popover', clickedElement.id)) {
        highlightedElement.attr('popover-is-open', false);
        $compile(highlightedElement)(scope);
    }
});

---

创建一个复制问题的plunk，您将更快地得到答案。试试看。