Angular.js load, process and display dynamic template obtained via REST $resource

Question

I have an Angular app that needs to support customizable reporting. My intention is to allow the user to select one of many reports available and have a back end REST api provide the template and the data as JSON (end user can customize the template).

The app would then insert the template somehow into a "reporting" view page then put the data in the scope and Angular should compile and display the report / template.

I've looked into ng-include however that seems to support only an URL or path to a document, however I have the template text already via the REST service and I cannot use static urls or file paths, this needs to be via REST api, if ng-include accepted the template text directly that might work but it doesn't.

I've tried writing a directive, trying to call a method on the page (getTemplate()) that would load the template already fetched from the scope however my directive doesn't have access to the scope apparently.

What tactic should I use to accomplish this? A directive seems best but I'm obviously doing it wrong and completely lost in the docs and my many attempts trying to accomplish this.

user1119167 · Accepted Answer · 2014-02-06 09:04:35Z

1

You could compile the dynamic template to an element on the DOM in a controller and then in the controller have something like this:

var el = angular.element('#myselector');   
el.html(mydynamichtmlfromresource);

$compile(el.contents())($scope);

I would setup your route with template with single DIV container (you could pull all the static container template in a single JavaScript file using HTMLToJS online tool or grunt task):

<section class="view">
  <div id="myselector"></div>
</section>

answered Feb 6, 2014 at 9:04

user1119167

525 bronze badges

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

Comments

himangshuj · Accepted Answer · 2014-02-06 00:49:13Z

1

I've tried writing a directive, trying to call a method on the page (getTemplate()) that would load the template already fetched from the scope however my directive doesn't have access to the scope apparently.

Yes you are right, but there is a way to pass data from scope to directive. lets say you want to pass a var "x" from scope to directive use this

<directive directiveVar='x'/>

inside directive, you need to use isolated scope

 "scope": {
                    "directiveVar": "="
                },

this variable will be available only in controller and postlink function, so your directive template needs to be like this

<ng-bind-html="directiveVar"/>

inside the postlink you may need to use this code snippet

$scope.directiveVar =$sce.trustAsHtml($scope.directiveVar)

References

answered Feb 6, 2014 at 0:49

himangshuj

7305 silver badges9 bronze badges

1 Comment

JohnC Over a year ago

I'll try this, thank you, missed ngBindHtml before now.

Collectives™ on Stack Overflow

Angular.js load, process and display dynamic template obtained via REST $resource

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related