Using AngularJS to generate PDF objects

Question

I have an angular controller that fetches json from my server and dynamically shows them. The code is:

    <div ng-controller="myImgController">
      <div ng-repeat="img in imgs">
        <div ng-repeat="i in img">
          <img ng-src="{{i.id}}"/>
        </div>
      </div>
    </div>

How can I replicate this in terms of dynamically generating markup to show pdfs within the browser. The current code is:

    <div ng-controller="myNewPdfController">
      <div ng-repeat="pdf in pdfs">
        <div ng-repeat="p in pdf">
          <object ng-attr-data="{{p.id}}" type="application/pdf" width="100%" height="100%"></object>
        </div>
      </div>
    </div>

But i'm having problems as ng-attr-data / ng-src does not work in respects to changing the source of the pdf document. Just in case you were wondering, the p.id is the url of the pdf.

Can anyone suggest a solution? Theres a lot of stuff out but I thought i'd make a clear question for other people with the same problem.

I think you need to use a directive: http://stackoverflow.com/a/14903933/5335589 — Captain, Oct 01 '15 at 09:45
@Captain the directive jsfiddle doesnt work. Tried to implement it & nothing happens. — cwiggo, Oct 01 '15 at 09:55
It works nice with `ng-attr-data`, i made a plunker http://plnkr.co/edit/jgLX82JkZBIeGcRBUjMJ Have you tried to debug your data ? — Captain, Oct 01 '15 at 14:23

score 0 · Accepted Answer · answered Oct 01 '15 at 14:25

I used Captains advice and went on to research Directives which then led on to be used to get a working solution. This involved multiple ng-repeats a request to my server and a directive used to generate the pdf objects. Let me know if you need some more insight. This is just a quick paragraph to show that the question is answered.

Using AngularJS to generate PDF objects

1 Answers1