AngularJS Compile Static Template

Question

J'ai un modèle que j'ai inclus dans une vue qui est placée dans $ templateCache.

<script type="text/ng-template" id="ratesPopover"> 
    <table class="rate-table"> 
     <tr ng-repeat="rate in plan.rates"> 
      <td>Rate</td> 
      <td>{{rate}}</td> 
     </tr> 
    </table> 
</script> 

J'ai alors une directive où je veux compiler le modèle avec un champ passé dans, mais je ne veux pas le modèle à liaison. Je veux juste que le service de compilation de $ compile le modèle comme chaîne statique de HTML ainsi je peux l'ajouter à un survol de Bootstrap de Twitter dans l'attribut de contenu de données. Aucune liaison bidirectionnelle n'est nécessaire. Ce que je vois quand j'affiche le survol est le modèle compilé sans les variables interpolées. Des idées sur ce que je pourrais faire de mal?

Answer 1

Essayez d'injecter le module $interpolate puis faire

var template = '<div>' + $templateCache.get('ratesPopover') + '</div>', 
    popover = $interpolate(template)(scope); 

element.attr('data-content', popover); 

Answer 2

Cette question est vieille, mais ma réponse peut aider d'autres personnes, j'ai récemment rencontré ce même problème.

Pour interpoler les valeurs que vous devez exécuter la portée appliquent $.

var template = angular.element('<div>' + $templateCache.get('ratesPopover') + '</div>'), 
    popover = $compile(template)(scope); 

scope.$apply(function() { 
    // popover is now interpolated 
}); 

Si vous êtes déjà dans un dans ce cas le cycle digérer $, alors appelant $ appliquent jetteront une erreur, vous avez juste besoin d'attendre jusqu'à ce que le cycle de digestion soit terminé:

var template = angular.element('<div>' + $templateCache.get('ratesPopover') + '</div>'), 
    popover = $compile(template)(scope); 

$timeout(function() { 
    // popover is now interpolated 
});