angularjs - How to delay running logic for directive until ui-route is resolved? -
i using angularjs ui-router. attempting make use of angularjs pdf directive available @ https://github.com/sayanee/angularjs-pdf. i'm having make changes example given because not have url pdf right off bat.
however, ran problem. because pass id value associated pdf route, have wait resolve parameter until route change has been successful. accomplished guidance @ https://github.com/angular-ui/ui-router/wiki under resolve section.
but, when, visit page, before of resolved, , before make query api id resolve url of file, find myself clicking through directive. of course, haven't populated scope of directive values since route hasn't returned resolve promise yet, null value, give me error in pdf.js url isn't populated.
how can delay executing logic within directive until scope has been appropriately populated require?
so don't have download directive linked @ top, here's i'm working with:
(function () { 'use strict'; angular.module('pdf', []).directive('ngpdf', function ($window) { return { restrict: 'e', templateurl: function (element, attr) { return attr.templateurl ? attr.templateurl : 'viewer.html'; }, link: function (scope, element, attrs) { var url = scope.pdfurl, pdfdoc = null, pagenum = 1, scale = (attrs.scale ? attrs.scale : 1), canvas = (attrs.canvasid ? document.getelementbyid(attrs.canvasid) : document.getelementbyid('pdf-canvas')), ctx = canvas.getcontext('2d'), windowel = angular.element($window); windowel.on('scroll', function () { scope.$apply(function () { scope.scroll = windowel[0].scrolly; }); }); pdfjs.disableworker = true; scope.pagenum = pagenum; scope.renderpage = function (num) { pdfdoc.getpage(num).then(function (page) { var viewport = page.getviewport(scale); canvas.height = viewport.height; canvas.width = viewport.width; var rendercontext = { canvascontext: ctx, viewport: viewport }; page.render(rendercontext); }); }; scope.goprevious = function () { if (scope.pagenum <= 1) return; scope.pagenum = parseint(scope.pagenum, 10) - 1; }; scope.gonext = function () { if (scope.pagenum >= pdfdoc.numpages) return; scope.pagenum = parseint(scope.pagenum, 10) + 1; }; scope.zoomin = function () { scale = parsefloat(scale) + 0.2; scope.renderpage(scope.pagenum); return scale; }; scope.zoomout = function () { scale = parsefloat(scale) - 0.2; scope.renderpage(scope.pagenum); return scale; }; scope.changepage = function () { scope.renderpage(scope.pagenum); }; scope.rotate = function () { if (canvas.getattribute('class') === 'rotate0') { canvas.setattribute('class', 'rotate90'); } else if (canvas.getattribute('class') === 'rotate90') { canvas.setattribute('class', 'rotate180'); } else if (canvas.getattribute('class') === 'rotate180') { canvas.setattribute('class', 'rotate270'); } else { canvas.setattribute('class', 'rotate0'); } }; pdfjs.getdocument(url).then(function (_pdfdoc) { pdfdoc = _pdfdoc; scope.renderpage(scope.pagenum); scope.$apply(function () { scope.pagecount = _pdfdoc.numpages; }); }); scope.$watch('pagenum', function (newval) { if (pdfdoc !== null) scope.renderpage(newval); }); } }; }); })(); though don't think it's particularly necessary, here's simplified view of controller:
angular.module('myapp').controller('mycontroller', function($scope, $http, $state) { var url = "http://example.com/myservice"; $http.get(url) .success(function(data, status, headers, config) { $scope.pdfurl = data.url; $scope.pdfname = data.name; $scope.scroll = 0; $scope.getnavstyle = function(scroll) { if (scroll > 100) return 'pdf-controls fixed'; else return 'pdf-controls'; } }) .error(function(data, status, headers, config) { $state.go('failure.state'); }); }); the ui-view looks following:
<ng-pdf template-url="pathtotemplate/viewer.html" canvasid="pdf" scale="1.5"></ng-pdf> thanks!
it looks need use ui-router resolve feature pdfurl before controller loaded. example, instead of using $http inside controller, should returning result of $http call routes resolve function, allowing set scope on controller initialisation. basic example (will not work written) started:
service:
angular.module('myapp', []) .factory('pdfservice', ['$http', function($http){ return { geturl: function(id){ // return promise http return $http(urlwithprovidedid).then(function(result){ // return necessary result data object injected return { url: result.data.url }; }); } }; }]); then inside route config:
.state('somestate', { controller: 'mycontroller', templateurl: 'sometemplate.html', resolve: { _pdfdata: ['pdfservice', '$stateparams', function(pdfservice, $stateparams) { return pdfservice.geturl($stateparams.whateverthepdfidis); }]}}); then inject result controller
.controller('mycontroller', ['$scope', '_pdfdata', function($scope, _pdfdata){ // set pdf url $scope.pdfurl = _pdfdata.url; }]); also, want mention directive posted quite poorly designed angular-way point of view, plays difficulties having.
Comments
Post a Comment