javascript - 如何从javascript函数访问 Angular $scope

Question

我添加了一个在 JavaScript 中解析 CSV 文件的功能。我想将解析后的数据分配给$scope.data.arr。目前，以下代码给出错误“Uncaught ReferenceError:范围未定义”。我是 AngularJS 的新手，我已经遵循了官方的 Angular 教程。

代码是:

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 !");
  }
}

--更新问题陈述。

每当用户选择要解析的新 csv 文件时，都会调用 handleFiles() 函数。

html代码:

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

我首先在javascript中实现了解析CSV的代码。我正在使用这些数据在 html Canvas 上渲染图表。我想要一个功能，用户只需选择具有更新数据的不同 csv 文件，并且图表应该自行更新而无需进一步输入。我添加了 angularjs，因为(在未来的实现中)文件和图形需要保存到数据库中。此外，可以从服务器请求一些数据，而不是用户使用 csv 文件加载它。

Answer 1

虽然您可以通过 Angular 的 element() 函数访问 $scope ，但看起来这段代码最好放入 Angular 服务中.

如果由于某种原因无法这样做，则需要引用属于您的 Controller 的 DOM 元素。

一旦你有了这个，你就可以做到

angular.element(myDomElement).scope()

这应该可以给你一个引用。

您还可以将 element.find() 与 css 选择器一起使用，但请注意，如果您尚未加载 JQuery，您将只剩下一组有限的选择器(仅标记名称)。

参见Docs for angular.element