Question

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

在我切换到ui-bootstrap之前，我使用了默认的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

TooltipHtmlUnsafe包含从另一个div获取的内容

1 个答案: