Question

我是棱角分明的新手，我正试图找出以下问题。当用户突出显示某些文本时，我想要一个ui-bootstrap popover来围绕突出显示的文本。由于这会操纵DOM我认为我需要使用一个指令。我能够在这里成功实现这个问题的更简单版本

app.directive('selectOnClick', function ($window) {
    return {
        link: function (scope, element) {
            element.on('click', function () {

                var span = document.createElement("span");
                span.style.fontWeight = "bold";
                span.style.color = "green";

                if (window.getSelection) {
                    var sel = window.getSelection();
                    if (sel.rangeCount) {
                        var range = sel.getRangeAt(0).cloneRange();
                        range.surroundContents(span);
                        sel.removeAllRanges();
                        sel.addRange(range);
                    }
                }
            });
        }
    }
});

在上面的代码中，我能够用span标记包围突出显示的文本。但是我想改为使用ui-bootstrap popover。我尝试用span替换var popover=angular.element("<a href=#' uib-popover='hello' popover-title='hello'></a>");部分，但这不起作用。我是在正确的轨道上还是这种方法不适用于ui-bootstrap元素？

已更新

这是我尝试添加popover元素

app.directive('selectOnClick', function ($window, $compile) {
    return {
        link: function (scope, element) {
            element.on('click', function () {

                var popover=angular.element("<a href=#' uib-popover='hello' popover-title='hello'></a>");

                if (window.getSelection) {
                    var sel = window.getSelection();
                    if (sel.rangeCount) {
                        var range = sel.getRangeAt(0).cloneRange();
                        range.surroundContents($compile(popover));
                        sel.removeAllRanges();
                        sel.addRange(range);
                    }
                }
            });
        }
    }
});

不幸的是，我在TypeError: Failed to execute 'surroundContents' on 'Range': parameter 1 is not of type 'Node'.行上收到错误range.surroundContents($compile(popover));所以我认为$compile(popover)不是正确的类型。它可以以某种方式转换为Node类型吗？

在指令内向DOM添加UI-Bootstrap元素

0 个答案: