AngularJS: Render HTML from scope variable with angular variables in the string

Question

Essentially what I am doing is requesting a template from my server. A short example of this looks something like this:

$scope.template = {
  'title': 'default',
  'description': 'default template',
  'html': '<html><head><style>body {background: red;}</style></head><body>{{data.name}}</body></html>'
}

$scope.data = {
  name: 'John'
}

This is the JSON object I am receiving from my server. I want to render this into the DOM. What would show up, is just what is store in $scope.name.

I have this in my angular

app.filter("trust", ['$sce', function($sce) {
  return function(htmlCode){
    return $sce.trustAsHtml(htmlCode);
  };
}]);

And this in my HTML

<div ng-bind-html="template.html | trust"></div>

This renders the html, but leaves {{name}} as {{name}}, when it should say John.

to know more read this docs.angularjs.org/api/ng/service/$compile — nmanikiran
– nmanikiran, Commented Nov 21, 2016 at 6:53

gyc · Accepted Answer · 2016-11-21 06:39:35Z

3

Storing html (with angular variables) in the backend is bad practice. Your priority should be to refactor your backend code.

If you don't have access to the backend you can try to create a directive that uses $compile:

$scope.template = $compile('<html><head><style>body {background: red;}</style></head><body>{{data.name}}')($scope);

You can do that in a controller as well using $interpolate:

$scope.template = $interpolate('<html><head><style>body {background: red;}</style></head><body>{{data.name}}')($scope);

answered Nov 21, 2016 at 6:39

gyc

4,3606 gold badges36 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

notacodemonkey Over a year ago

I'm building the backend too, which is in Node. How would you suggest refactoring backend code? For this, I was trying to make a fast way to switch templates. Would you use something like jade?

gyc Over a year ago

A backend should only return data. The formatting is done client side using angularjs templating.

notacodemonkey Over a year ago

Right, I'm wanting to store my templates in the backend becasue they should dynamically show depending on the user. All of these templates are going to show the same data, but just in different formats.

Andre Debuisne · Accepted Answer · 2016-11-21 06:36:52Z

0

it seems you forgot in $scope.data to put name in single quotes, like this:

$scope.data = {
  'name' = 'John'
}

Hope this works

answered Nov 21, 2016 at 6:36

Andre Debuisne

3031 gold badge3 silver badges16 bronze badges

1 Comment

notacodemonkey Over a year ago

As mentioned below, that was an error in me simplifying the question, not the actual code. I've updated the question.

Collectives™ on Stack Overflow

AngularJS: Render HTML from scope variable with angular variables in the string

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related