Question

我对javascript和angularjs很新，我遇到了这个问题。基本上我试图编写一个函数来获取所选文本并在其周围创建一个引导程序。这就是我到目前为止所拥有的

    $scope.highlight = function () {

            var a = document.createElement("a");
            a.setAttribute('href', "#");
            a.setAttribute('data-toggle','popover');
            a.setAttribute('data-content','Some content inside the popover');
            a.setAttribute('title','popover title');

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

        };

        $(document).ready(function(){
            $('[data-toggle="popover"]').popover();
        });

上面的代码确实用弹出的<a href="#" data-toggle="popover" data-content="Some content inside the popover" title="popover title">标签包围了所选文本，但是当你点击它时没有弹出窗口。有人能告诉我我失踪了吗？这甚至是实现这个的正确方法吗？

Answer 1

尝试类似的东西：

控制器：

 mymodule.controller('MainCtrl', [ '$scope', '$timeout',function ($scope,$timeout) {

    $scope.highlight = function () {

        var a = document.createElement("a");
        a.setAttribute('tabindex', "0");
        a.setAttribute('data-toggle','popover');
        a.setAttribute('data-content','Some content inside the popover');
        a.setAttribute('title','popover title');

        if (window.getSelection) {
                var sel = window.getSelection()
                var range = sel.getRangeAt(0).cloneRange();
                range.surroundContents(a);
                sel.removeAllRanges();
                sel.addRange(range);
        }
        $timeout(function(){
          $('[data-toggle="popover"]').popover();
        }, 50);
    };

  }]);

有一些细节需要注意，可以正确创建弹出窗口：

您需要为popover（http://getbootstrap.com/javascript/#popovers）添加此属性：

a.setAttribute('tabindex', "0");

在添加弹出窗口的新结构并在DOM上进行更改以初始化所有弹出框之后，您必须调用popover函数

$('[data-toggle="popover"]').popover();

模板：

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quos vel quam harum sapiente ea corporis magnam quo, voluptas tempore iure, aspernatur, quia accusamus soluta nostrum. Esse sapiente dignissimos excepturi.
</p>

<button class="btn btn-success" ng-click="highlight()">
  Create popover
</button>

从文本选择创建弹出窗口

1 个答案: