Interpolation in angular-translate for html injection

Question

I'm trying to work out how to translate large blocks of html with angular-translate (which I'm using as a filter).

I've got language json files:

{
  "PURPOSE": "Sie Damit Beabsichtigt",
  "INTRO_VID": "Sehen Sie sich das Intro-Video",
  "TOUR": "An der Tour teilnehmen",
  "PURPOSE_COPY": "<p>Die Idee hinter [snip]</p><p>Currency: {{vm.testAmount}}</p><p>Date: {{vm.testDate}}</p>"
}

then in the html I take a language string and pass it to the translate filter with the data from the view model (translate:vm) and finally to the htmlSafe filter, which allows it to be parsed into html:

<div data-ng-bind-html="'PURPOSE_COPY' | translate:vm | htmlSafe"></div>

The htmlSafe filter looks like:

angular.module('kitchenapp').filter("htmlSafe", ['$sce', function($sce) {
    return function(htmlCode){
        return $sce.trustAsHtml(htmlCode);
    };
}]);

The html is injected into the page fine, but does not compile, even though I passed the view model to translate. :(

Answer 1

So, whatever you pass to translate:<expression> is taken as the scope. If you want to pass your actual scope then pass translate:this. Above I passed vm and then looked for vm.x: That equates to vm.vm.x, which obviously doesn't exist.