テキスト選択からポップオーバーを作成

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); 
    }; 

    }]); 

あなたはpopoversに注意を払わなければならないいくつかの小さな細部があるが正しく作成することができますポップオーバーのためのアトリビュート（http://getbootstrap.com/javascript/#popovers）：

<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>