angularjs - Writing a directive for an existing javascript object the "Angular" way -

i'm working on trying make angular directive encapsulates viewer.js functionality pdf.js project because how viewer looks, able pass in variables own angular bindings.

now, there 2 angular-pdf-like projects out there sayanee's project (https://github.com/sayanee/angularjs-pdf) looks provides basic functionality @ https://github.com/mozilla/pdf.js/blob/master/examples/text-selection/js/minimal.js , anrennmair's project @ https://github.com/akrennmair/ng-pdfviewer

these pdf viewers don't good, , how pdf.js viewer shows page after page view , lets scroll through them. don't need functionality of printing, bookmarks, attachments, saving, opening, etc should save @ least work, question this:

how write viewer directive? more specifically, in answer previous question, respondent said first github project poorly designed angular-way point of view. what's proper way this? prefer write first time according best practices, i've been unable find clear practices in scope.

basically need restricted directive element. use template add canvas , div tags. call on them in link function render pdf.

you take 1 step further , wrap pdfjs , render , load functions in angular service , inject directive. way loading , rendering methods sit in service , directive setup template , call on them.

the markup:

<pdf-viewer pdf-path="pathtoyourpdf"></pdf-viewer>

the directive: not functional directive but, should give general idea of how achieve looking for.

angular.module('myapp', [])   .directive('pdfviewer', [      function() {       return {         template: '<canvas></canvas><div></div>',         replace: true,         restrict: 'e',         scope: {           pdfpath: '='         },         link: function postlink(scope, ielement, iattrs) {           scope.pdfpath = iattrs.$eval(pdfpath);            scope.pdf = pdfjs.getdocument(scope.pdfpath);            scope.pdf             .then(renderpdf);            var renderpdf = function() {             service.pdf.getpage(1)               .then(renderpage);           };            var renderpage = function(page) {             var viewport = page.getviewport(scale);             var canvas = ielement.find('canvas')[0];             // set canvas height , width height , width of viewport             var context = canvas.getcontext("2d");              // following few lines of code set scaling on context if on hidpi display             var outputscale = getoutputscale(context);             canvas.width = (math.floor(viewport.width) * outputscale.sx) | 0;             canvas.height = (math.floor(viewport.height) * outputscale.sy) | 0;             canvas.style.width = math.floor(viewport.width) + 'px';             canvas.style.height = math.floor(viewport.height) + 'px';              // append canvas pdf container div             var $pdfcontainer = ielement;             ielement.css("height", canvas.style.height)               .css("width", canvas.style.width);              var canvasoffset = canvas.offset();              var textlayerdiv = ielement.find('div')[0];              textlayerdiv               .addclass("textlayer")               .css("height", canvas.style.height)               .css("width", canvas.style.width)               .offset({                 top: canvasoffset.top,                 left: canvasoffset.left               });              context._scalex = outputscale.sx;             context._scaley = outputscale.sy;             if (outputscale.scaled) {               context.scale(outputscale.sx, outputscale.sy);             }              page.gettextcontent()               .then(function(textcontent) {                 var textlayer = new textlayerbuilder({                   textlayerdiv: textlayerdiv,                   viewport: viewport,                   pageindex: 0                 });                  textlayer.settextcontent(textcontent);                  var rendercontext = {                   canvascontext: context,                   viewport: viewport                 };                  page.render(rendercontext);               });           };         }       };     }   ]);