how to access angular $scope from a javascript function

Question

i have added a functionality to parse a CSV file in javascript. I want to assign the parsed data to $scope.data.arr. Currently, the below code gives error "Uncaught ReferenceError: scope is not defined". I am newbie to AngularJS and I have followed the official angular tutorials.

The code is:

application.js

'use strict';
/* Application module */
var ddvApp = angular.module('ddvApp', ['ddvControllers']);

dataController.js

'use strict';
/*Data Controller*/

var ddvControllers = angular.module('ddvControllers', []);

ddvControllers.controller('DataController', ['$scope', function($scope){
  $scope.data = {}; //created a empty data object.
}]);

read-csv.js

function handleFiles(files) {
  // Check for the various File API support.
  if (window.FileReader) {
    // FileReader are supported.
    getAsText(files[0]);
  } 
  else {
    alert('FileReader are not supported in this browser.');
  }
}

function getAsText(fileToRead) {
  var reader = new FileReader();
  // Read file into memory as UTF-8      
  reader.readAsText(fileToRead);
  // Handle errors load
  reader.onload = loadHandler;
  reader.onerror = errorHandler;
}

function loadHandler(event) {
  var csv = event.target.result;
  scope.data.arr = processData(csv); //this is the line of code where i want to assign the parsed data to the angularjs $scope.
}

function processData(csv) {
  var allTextLines = csv.split(/\r\n|\n/);
  var lines = [];
  for (var i = 0; i < allTextLines.length; i++) {
    var data = allTextLines[i].split(',');
    var arr = [];
    for (var j = 0; j < data.length; j++) {
      arr.push(data[j].trim());
    }
    lines.push(arr);
  }
  return lines;
}

function errorHandler(event) {
  if(event.target.error.name == "NotReadableError") {
    alert("Cannot read file !");
  }
}

--UPDATE Problem Statement.

The handleFiles() function is called whenever user selects a new csv file to be parsed.

html code:

<input type="file" id="csvFileInput" onchange="handleFiles(this.files)" accept=".csv">

I firstly implemented the code to parse the CSV in javascript. I am using this data to render a graph on html canvas. I wanted a functionality where the user just selects a different csv file with updated data and the graph should update itself without further inputs. I added angularjs because (in future implementations) the file and graph need to be saved to a db. Also, some data can be requested from server instead of user loading it using a csv file.

Why do you expect scope.data.arr to be available there? When/where is your read-csv code being executed? Why aren't you doing it in an angular service/factory? — Ian
– Ian, Commented Jun 27, 2014 at 5:15
Restructure your code. Don't put your read-csv code into the global scope - put it in an Angular service. In your controller, you can inject the service and then bind an onchange event to the input. In that handler, call the new service method, passing the input's files. — Ian
– Ian, Commented Jun 27, 2014 at 14:11

ivarni · Accepted Answer · 2014-06-27 05:21:35Z

3

While you can get acccess to the $scope via angular's element() function it looks like this is code that would be better put into an angular service.

If doing that is for some reason not an option, you need a reference to a DOM element that belongs to your controller.

Once you have that, you can do

angular.element(myDomElement).scope()

and that should give you a reference.

You can also use element.find() with css selectors but be aware that if you have not loaded JQuery you're left with a limited set of selectors (tag-names only).

See Docs for angular.element

answered Jun 27, 2014 at 5:21

ivarni

17.9k17 gold badges79 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

link · Accepted Answer · 2014-06-27 05:20:06Z

-1

What should be done is to copy all the JavaScript from read-csv.js and put it into dataController.js below this line:

$scope.data = {}; //created a empty data object.

define arr as an array:

$scope.data = {
  arr: []
};

add a '$' in front of scope so that line should be:

$scope.data.arr = processData(csv);

This should fix the issue.

answered Jun 27, 2014 at 5:20

link

2,5101 gold badge18 silver badges18 bronze badges

Comments

dustyrockpyle · Accepted Answer · 2014-06-27 05:23:49Z

The proper way to do this is to put the functions in your read-csv.js file into a service, and then handle events using $rootScope.broadcast and $scope.$on.

So it may look something like:

module.factory('readCsv' ['$rootScope', function(rootScope){
    var readCsv = {};
    // load readCsv with read-csv.js functions
    readCsv.loadHandler = function(event){
        var csv = readCsv.processData(event.target.result);
        $rootScope.$broadcast('$csvEvent', csv);
    };
    return readCsv;

}]).controller('DataController', ['$scope', function($scope){
    $scope.data = {};
    $scope.$on('$csvEvent', function(csv){
        $scope.data.arr = csv;
    };
}]);

Collectives™ on Stack Overflow

how to access angular $scope from a javascript function

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related