如何从javascript函数访问angular $ scope

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.

Answer 1

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

Answer 2

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.

Answer 3

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;
    };
}]);