ブートストラップツールチップが

Question

が、私はそれの一部が$sceとng-bind-htmlを使用してtypescriptangularjsコントローラからHTML注入を使用して生成されたHTMLページを持って働いていません。
私の問題は、bootstrapのツールチップスタイルが適用されておらず、単純な黄色のツールチップでしか作成できないということです。 HTMLを生成
私のコントローラ機能（それは、関連するのですが、console.logセクションに次のコメントを注意してくださいかどうかわからない）：

public renderHtml =() => { 
this.test = '<span style="text-decoration:underline" data-toggle="tooltip" data-placement="top" title="Tooltip on top">my team</span>'; 
console.log(this.test); // this line is logged 6 times with the same value on each page refresh 

return this.$sce.trustAsHtml(this.test); 
} 

HTML（私はページへの直接まったく同じHTMLスニペットを追加しましたし、それは）正常に動作します：ここで

<!--bootstrap tooltip doesn't show--> 
<div class="row margin-25" ng-bind-html="cdc.renderHtml()"></div> 

<div> 
<!--bootstrap tooltip works--> 
<span style="text-decoration:underline" data-toggle="tooltip" data-placement="top" title="Tooltip on top">my team</span> 
</div> 

は結果である（）左に動作していない：

Answer 1

：

オプトイン機能

パフォーマンス上の理由から、ツールチップとPopoverのデータAPIはオプトインであるため、をご自身で初期化する必要があります。jsfiddle上のあなたのアプローチと

例：

angular.module('ExampleApp', []) 
 
    .controller('ExampleController', function($sce) { 
 
    this.renderHTML =() => { 
 
     return $sce.trustAsHtml('<span style="text-decoration:underline" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top">my team</span>'); 
 
    }; 
 
    }); 
 
$(document).ready(function() { 
 
    $('span').tooltip(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController as vm"> 
 
    <div ng-bind-html="vm.renderHTML()"></div> 
 
    <span style="text-decoration:underline" data-toggle="tooltip" data-placement="right" title="Tooltip on top">my team</span> 
 
    </div> 
 
</div>

良いsolutionは使用ディレクティブです：

angular.module('ExampleApp', []) 
 
    .controller('ExampleController', function($sce) {}) 
 
    .directive("title", function($timeout) { 
 
    return { 
 
     link: function(scope, element) { 
 
     $timeout(function() { 
 
      $(element).tooltip() 
 
     }, 0); 
 
     } 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController as vm"> 
 
    <div> 
 
     <span style="text-decoration:underline" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top">my team</span> 
 
    </div> 
 
    <span style="text-decoration:underline" data-toggle="tooltip" data-placement="right" title="Tooltip on top">my team</span> 
 
    </div> 
 
</div>

Answer 2

ブートストラップは、すべての相互作用Iを意味し、jQueryを使って動作しますあなたが新しいコンテンツを追加するときに、document.readyが呼び出されたとき、jQueryはこの新しいコンテンツの使い方を知らない。 角度を使ってブートストラップを実装するプロジェクトがあります：ng-bootstrap。

コードにHTMLを書き込んでページに追加する代わりに、directivesまたはcomponentsを使用して作業する必要があります。 私はfree course by codeschoolに従うことをお勧めします、それを使用する方法、そしてなぜこれが角の方法であるかについて説明します。

単にあなたのツールチップは、より角度の方法でそれをやってなくて、仕事を得るために：documentation 1として

public renderHtml =() => { 
 
    this.test = '<span style="text-decoration:underline" data-toggle="tooltip" data-placement="top" title="Tooltip on top">my team</span>'; 
 
    console.log(this.test); // this line is logged 6 times with the same value on each page refresh 
 
    
 
    $timeout(function() { 
 
    angular.element('[data-toggle="tooltip"]').tooltip(); // if you've added jQuery, angular.element simply uses jQuery 
 
    }, 0); // timeout 0 means it'll run in the next $digest cycle. 
 

 
    return this.$sce.trustAsHtml(this.test); 
 
}