AngularJs: grab compiled html and set into tooltip

问题

I'm using angular js bootstrap tooltip to show tooltips on a set of elements.

Plunker: http://plnkr.co/edit/9xk41f3CR0wnajN71bSi

I need to inject into the tooltip html compiled by angular, but i don't really get how. The tooltip tutorial is not useful to me because it gets the html from the scope as variable, but for a set of elements this is not possible.

How can i fill tooltip-html-unsafe?

回答1:

You can do something like this:

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>

Add to controller:

$scope.tooltips = [];

Directive:

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

      });
    }
  }
})

Used index to avoid creating an isolated scope. Can also be done with isolated scope and create a property of phone instead of using scope.tooltips[index]

DEMO

来源：https://stackoverflow.com/questions/20454799/angularjs-grab-compiled-html-and-set-into-tooltip