从另一个 div 获取内容的 TooltipHtmlUnsafe

Question

我正在尝试显示一个带有 html 内容的工具提示，以及我想从其中有角度标记的子 div 中获取的 html。

在切换到 ui-bootstrap 之前，我使用了默认的引导工具提示，它是在一个指令中创建的，用('.my-tooltip-content',element).html() 填充内容

现在使用 ui-bootstrap，我尝试在 ui-tooltip 上使用相同的指令/逻辑，但现在我尝试设置属性变量。问题是，我不知道如何从工具提示内呈现的.my-tooltip-content div 中获取 html，而不会丢失绑定。如果我使用 $interpolate，我会正确渲染我的 div 的 html，但输出当然是固定的（不再更新），$compile 我以前从未使用过，但我认为这将是正确的地方这么用，可能我不知道怎么用，但是$compile给了我循环结构的异常。

这是我的应用的简化版本：
http://plnkr.co/edit/46NsEPArtm4hph0ROlPS?p=preview

摘录：

<div class="hover" tooltip-html-unsafe="" tooltip-trigger="mouseenter" tooltip-placement="bottom">
  <div>
      <p>Hover me {{booking.name}} !</p>
      <!-- about 20 more lines -->
  </div>
  <div class="my-tooltip-content"><!-- hidden by default -->
      <p class="booker-name">{{booking.name}}</p>
      <p>Does the name in this tooltip update?</p>
      <!-- about 10 more complex lines -->
  </div>
</div>

anApp.directive('hover', ['$compile','$interpolate', function($compile,$interpolate){
  return{
    restrict: 'C',
    link: function(scope,element,attrs){
      var html1,html2,html3;
      var content = $(element).find('.my-tooltip-content');

      // This works, but no binding
      html1 = $interpolate(content.html())(scope);

      // This I'd like to work, but I get "Can't interpolate: {{tt_content}} TypeError: Converting circular structure to JSON"
      html2 = $compile(content.html())(scope);

      // This brings my html into the tooltip but curlybraces are curlybraces (not compiled)
      html3 = content.html();

      attrs.tooltipHtmlUnsafe = html1;
    }
  }  
}])

有没有一种简单的方法来获取 .my-tooltip-content 的 html，并将它的所有角度标记/绑定注入到 tooltip-content 变量中？

PS：我知道我可以将所有 html 直接压缩到 tooltip-html-unsafe 属性中，但是我在现实世界中的 my-tooltip-content 中有太多行，这根本行不通（会使工具提示内容 html 对人类来说不可读且不可更改）。

Answer 1

如果您需要使用子 div，一种解决方案是使用函数将 div 的内插内容传递给工具提示。例如：

anApp.directive('hover', ['$compile','$interpolate', function($compile,$interpolate){
  return{
    restrict: 'C',
    link: function(scope,element,attrs){
      scope.myTooltip = function() {
        var content = $(element).find('.tooltip-content');
        return $interpolate(content.html())(scope);
      };
    }
  }
}])

您的 html 将需要更新以使用工具提示的新范围值：

<div class="hover" tooltip-html-unsafe="{{myTooltip()}}" tooltip-trigger="mouseenter" tooltip-placement="bottom">

这是updated plnkr