从文本选择创建弹出框答案

【问题标题】：Create Popover from Text Selection从文本选择创建弹出框
【发布时间】：2016-07-05 05:31:42
【问题描述】：

我对 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"> 标记围绕弹出框的选定文本，但是当您单击它时，不会出现弹出框。有人可以告诉我我错过了什么吗？这甚至是实现这一点的正确方法吗？

【问题讨论】：

标签： javascript angularjs twitter-bootstrap

【解决方案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);
    };

  }]);

有一些小细节你必须注意才能正确创建弹出框：

您需要为弹出框添加此属性 (http://getbootstrap.com/javascript/#popovers)：

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

在为弹出框添加新结构后，您必须调用弹出框函数并对 DOM 进行更改以初始化所有弹出框

$('[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>

【讨论】：