Бутстрап подсказка из динамического HTML не работает

Question

У меня есть HTML страницу, которая его часть генерируется с использованием HTML инъекции из контроллера typescriptangularjs с использованием $sce и ng-bind-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

Как за documentation:

Opt-функциональность

По соображениям производительности всплывающая подсказка и данные Pop-apis являются опциями, то есть вы должны сами их инициализировать.

Пример с вашим подходом на 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

Bootstrap работает с JQuery, то есть все взаимодействия я s вызвал document.ready, когда вы добавляете новый контент, jQuery не знает, как использовать этот новый контент. Существует проект, который реализует бутстрап угловым способом: ng-bootstrap.

Вместо того чтобы писать HTML-код в свой код для добавления на страницу, вы должны работать с использованием directives или components. Я бы порекомендовал вам следующее: free course by codeschool, он объясняет, как их использовать, и почему это угловой способ.

Чтобы просто получить подсказку, чтобы работать, не делая его более в угловом образом:

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