来自动态 HTML 的引导工具提示不起作用

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 sn-p 直接添加到页面中，它工作正常）：

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

选择加入功能

出于性能原因，Tooltip 和 Popover data-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 一起工作，这意味着所有交互都在 document.ready 上调用，当您添加新内容时，jQuery 不知道如何使用这些新内容。 有一个项目以角度方式实现引导：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);
}