Accessing an object from an AngularJS controller in an external function

Question

Accessing an object from an AngularJS controller in an external function

I previously inquired about this issue and received a suggestion to add a service, but it did not solve the problem. I am trying to access a variable from a controller ($scope) within an external function. Below is a snippet of the example:

app.controller('formContratCtrl', function ($scope, $location, $rootScope,$cordovaFile, $cordovaGeolocation, $cordovaCamera) {

"$scope.owner={
"first":"john",
"last":"kennedy",
"phone":"",
"car":"",
"registration":"",
"dateRegistration":"
};


var JutoPDFCreator = {
createPDF: function(filename) {
var doc = new jsPDF();
doc.text(13, 20, 'First Name : '+ $scope.owner.first);
doc.text(13, 25, 'Last Name : '+ $scope.owner.last);
doc.text(13, 30, 'Phone : '+ owner.phone);
doc.text(13, 35, 'Rented Vehicle : '+ owner.car);
doc.text(13, 40, 'Registered : '+ owner.registration);
doc.text(13, 45, 'Since : '+ owner.dateRegistration);
.
.
}

javascript angularjs

Answer 1

Answer №1

I developed a custom service that interacts with an external library in the following manner:

app.service('myPDFService', function() {

  this.generatePDF = function(filename, user) {
    var doc = new jsPDF();
    doc.text(13, 20, 'First Name : ' + user.First);
    doc.text(13, 25, 'Last Name : ' + user.Last);
    doc.text(13, 30, 'Phone : ' + user.phone);
    doc.text(13, 35, 'Rented Vehicle: ' + user.Car);
    doc.text(13, 40, 'License Plate: ' + user.registration);
    doc.text(13, 45, 'Since: ' + user.dateRegistration);

    console.log(user);
  };

});

The service is injected into the controller:

app.controller('formContratCtrl', ['myPDFService', function(myPDFService) {

  this.user = {
    first: "John",
    last: "kennedy",
    phone: "",
    car: "",
    registration: new Date(),
    dateRegistration: new Date()
  };

  this.createDocument = function() {
    myPDFService.generatePDF('filename', this.user);
  };

}]);

For a complete working example visit plunker. Consider using a service to handle the external library as well. If the controllerAs syntax seems unfamiliar, replace this with $scope and inject $scope where necessary.

Angular provides comprehensive documentation on services which can be found here.

Answer 2

I developed a custom service that interacts with an external library in the following manner:

app.service('myPDFService', function() {

  this.generatePDF = function(filename, user) {
    var doc = new jsPDF();
    doc.text(13, 20, 'First Name : ' + user.First);
    doc.text(13, 25, 'Last Name : ' + user.Last);
    doc.text(13, 30, 'Phone : ' + user.phone);
    doc.text(13, 35, 'Rented Vehicle: ' + user.Car);
    doc.text(13, 40, 'License Plate: ' + user.registration);
    doc.text(13, 45, 'Since: ' + user.dateRegistration);

    console.log(user);
  };

});

The service is injected into the controller:

app.controller('formContratCtrl', ['myPDFService', function(myPDFService) {

  this.user = {
    first: "John",
    last: "kennedy",
    phone: "",
    car: "",
    registration: new Date(),
    dateRegistration: new Date()
  };

  this.createDocument = function() {
    myPDFService.generatePDF('filename', this.user);
  };

}]);

For a complete working example visit plunker. Consider using a service to handle the external library as well. If the controllerAs syntax seems unfamiliar, replace this with $scope and inject $scope where necessary.

Angular provides comprehensive documentation on services which can be found here.

Answer 3

Answer №2

To start, you should establish a factory for the external library.

function myPDFFactory() {
    return function() { 
        new jsPDF() 
    };
}
angular.module('yourApp').factory('jsPDF', myPDFFactory);

Next, you can design your custom adapter like this:

MyPDFCreator.$inject = ['jsPDF'];
function MyPDFCreator = function(jsPDF) {
    this.doc = jsPDF();
 }

 MyPDFCreator.prototype.generatePDF = function(filename, owner) {
     this.doc.text(13, 20, 'Name : '+ owner.First);
     . . .
 }
 angular.module('yourApp').service('myPDFCreator', MyPDFCreator);

Finally, just inject the myPDFCreator into your controller and execute the generatePDF() method.

Answer 4

To start, you should establish a factory for the external library.

function myPDFFactory() {
    return function() { 
        new jsPDF() 
    };
}
angular.module('yourApp').factory('jsPDF', myPDFFactory);

Next, you can design your custom adapter like this:

MyPDFCreator.$inject = ['jsPDF'];
function MyPDFCreator = function(jsPDF) {
    this.doc = jsPDF();
 }

 MyPDFCreator.prototype.generatePDF = function(filename, owner) {
     this.doc.text(13, 20, 'Name : '+ owner.First);
     . . .
 }
 angular.module('yourApp').service('myPDFCreator', MyPDFCreator);

Finally, just inject the myPDFCreator into your controller and execute the generatePDF() method.

Accessing an object from an AngularJS controller in an external function

Answer №1

Answer №2

Similar questions

The Vue.js component was unable to retrieve the data

What is the best way to incorporate AngularJS data into JavaScript for use in Google Chart?

The various sections of my website are neatly tucked away under one tab, only revealing themselves to users as they click on each individual tab

What is the best method for preserving HTML content using Ajax?

Next.js server component allows for the modification of search parameters without causing a re-fetch of the data

What is the most effective method for identifying duplicate values in a multidimensional array using typescript or javascript?

Struggling with populating a dropdown in MVC with JSON data fetched from an API using jQuery/JavaScript

Ways to access a field value in SAPUI5

Alter the browser's URI without having to reload the page

displaying a div as a pop-up within an ASP.NET MVC 4 web application

Implementing gridlines on a webpage using HTML and JavaScript to mimic the grid layout found in Visual Studios

Guide to switching between 3 classes with mouseover using JavaScript

How to include an href in a button using Pug without disrupting a form

New feature in Safari extension: transferring window object from inject script to global page

Top recommendation for utilizing $scope variables in Angular applications

A function containing a JavaScript Event Listener for better encapsulation

Looking for giphy link within a v-for loop (Vue.js)

Transform JavaScript object into desired structure

The tablet is having trouble playing the mp3 audio file

Unable to hide jQuery form and receiving undefined function output