0

Im generating some html code with angular in it, lets say it look something like this

exports.someApi = function(req,res){
  res.send('<p>some html {{ "ENTER-PASSWORD" | translate }} </p>');
}

and in my controller im doing this

$http({method: 'GET', url: '/someapi'}).
    success(function(data, status, headers, config) {
      console.log(data);
      $('.testPrint').html(data);
    }).
    error(function(data, status, headers, config) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });

the problem is, I get resposne rigth, but angular code is not executed it print this in html

some html {{ "ENTER-PASSWORD" | translate }}

it should write some html enter password

How to do this?

Sredoje Cutovic
  • 133
  • 1
  • 12

1 Answers1

1

This is not the way to go with Angular. Specifically, $(...).html(data) will set the data directly to DOM, bypassing Angular's compilation step. This step is where the "magic" happens" (i.e. in your case the {{...}} get bound to the model).

Some ways to do it:

  • Make a directive and use templateUrl: "/someapi". When the directive is to be displayed, Angular will load /someApi and compile it.
  • Use ng-include="'/someApi'" (note single quotes within double quotes; this is intentional). Maybe together with ng-if to hide the content when not wanted.
  • The ui-router provides advanced facilities for subview navigation that may suit your needs.

A must-read is this great answer.

Community
  • 1
  • 1
Nikos Paraskevopoulos
  • 39,514
  • 12
  • 85
  • 90