动态HTML中的Bootstrap工具提示不起作用

Question

我有一个HTML页面，其中部分内容是使用HTML typescript控件使用angularjs和$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

Bootstrap与jQuery一起使用，意味着所有交互都在document.ready上调用，当你添加新内容时，jQuery不知道如何使用这个新内容。 有一个项目以角度方式实现bootstrap：ng-bootstrap。

您应该使用directives或components，而不是在代码中编写HTML以添加到页面中。 我建议关注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);
}

Answer 2

根据documentation：

  

选择加入功能

     

出于性能原因，Tooltip和Popover data-apis是选择加入的，这意味着您必须自己初始化。

您在jsfiddle上的方法示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更好solution是使用指令：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;