This is a very old system, that we’re not in a spot to update to something modern… just wanted to get that out there.
I’m working on a project that is based on Angular 1.5. I’ve been tasked with allowing people to download a PDF version of all the pages/tabs visible to them on a website. I’m trying to use the built in tools of AngularJS but I’m hitting issues when a page has ng-model
binds.
I have a download content page/tab where folks can download all the other pages. Defined as:
registrationModule.controller("dataDownload", function ($scope, $http, $q, $routeParams,
$location, viewModelHelper, $rootScope, $compile, $timeout, $templateRequest, $sce, $cookies) {
$scope.isLoading = true;
$scope.buttonsDisabled = false;
$scope.error = false;
var initPage = function () {
$scope.isLoading = false;
};
initPage();
$scope.downloadContent = function (httpResponse) {
var blob = new Blob([httpResponse.data], { type: "application/pdf" });
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
const fn = httpResponse.headers()['content-disposition'];
if (fn) {
link.download = fn.slice(fn.indexOf("=") + 1);
} else {
link.download = 'download.pdf';
}
link.click();
}
$scope.prepareContent = function (templateUrl, stringElement, pdfName) {
$templateRequest(templateUrl).then(function (template) {
var angularElement = angular.element(stringElement);
$compile(angularElement.html(template).contents())($scope);
$timeout(function () {
const payload = {
htmlContent: angularElement.html(),
pdfName: pdfName
};
viewModelHelper.apiConfigPost('api/content-downloads/generate-pdf', payload, { responseType: "arraybuffer" },
// creates PDF (THIS WORKS)
);
});
});
}
$scope.downloadBio = function () {
$scope.buttonsDisabled = true;
$scope.error = false;
var templateUrl = $sce.getTrustedResourceUrl('/App/Registration/Views/Bio.html');
var stringElement = '<div data-bio></div>';
$scope.prepareContent(templateUrl, stringElement, 'Bio');
};
});
The BIO view.html is define like:
<div class="row registrationInnerContent" ng-controller="bioModel">
<input type="text" class="form-control full-width" ng-model="bio.Nickname">
... more ng-model binds ...
</div>
The BIO js model is defined like so:
registrationModule.controller("bioModel", function ($scope, registrationService, $http, $q, $routeParams, $window, $location,
viewModelHelper, $rootScope, $cookies, toastrFactory, focus, $uibModal) {
$scope.bio = null;
... other items not relevant ....
var getBio= function () {
viewModelHelper.apiGet('api/getbio/' + $rootScope.custId, null,
function (result) {
$scope.bio = result.data;
});
}
getBio();
});
How can I get my data download controller to successfully fill in the ng-model
pieces of the BIO.html when using the $compile
(and other) functions?