javascript - AngularJs:抓取已编译的 html 并设置为工具提示

Question

我正在使用 angular js bootstrap tooltip 来显​​示一组元素的工具提示。

笨蛋:http://plnkr.co/edit/9xk41f3CR0wnajN71bSi

我需要注入(inject)由 angular 编译的工具提示 html，但我真的不明白如何。工具提示教程对我没有用，因为它从范围中获取 html 作为变量，但对于一组元素，这是不可能的。

如何填写tooltip-html-unsafe？

Answer 1

你可以这样做:

HTML:

<li ng-repeat="phone in phones">      
       <div phone-info index="{{$index}}">
         <p tooltip-html-unsafe="{{tooltips[$index]  }}">A tooltip should appear on top of this line ({{ phone.name }} - {{ phone.snippet }})</p>         
       <div>
</li>

添加到 Controller :

$scope.tooltips = [];

指令:

app.directive('phoneInfo', function($compile, $timeout) {
  /* wrap in root element so we can get final innerHTML*/
  var tipTemplate = '<div><p> This will be the content of {{phone.name}} injected in the tooltip </p><div>';

  return {
    link: function(scope, el, attrs) {
      var tipComp = $compile(tipTemplate)(scope)
      $timeout(function() {
        scope.tooltips[attrs.index] = tipComp.html()

      });
    }
  }
})

使用 index 来避免创建一个孤立的范围。也可以使用隔离范围来完成并创建 phone 的属性，而不是使用 scope.tooltips[index]

DEMO