Javascript 从文本选择创建弹出框

我对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();
        });

---

上面的代码确实使用popover的

标记围绕所选文本，但是当您单击它时，不会显示popover。有人能告诉我我错过了什么吗？这是实现这一点的正确方法吗？

试试这样的方法：

控制器：

 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（）添加此atribute：

您必须在添加新的popover结构后调用popover函数，并在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>

Lorem ipsum dolor sit amet，奉献精英。我们需要的是智慧，需要的是时间，需要的是智慧，需要的是智慧。除此之外，还有一位高贵的女主人。

创建popover

试试这样的方法：

控制器：

 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（）添加此atribute：

您必须在添加新的popover结构后调用popover函数，并在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>

Lorem ipsum dolor sit amet，奉献精英。我们需要的是智慧，需要的是时间，需要的是智慧，需要的是智慧。除此之外，还有一位高贵的女主人。

创建popover