如何从javascript函数中访问angular $scope

how to access angular $scope from a javascript function

本文关键字：访问 angular scope 函数 javascript      更新时间：2023-09-26

我添加了一个在javascript中解析CSV文件的功能。我想把解析后的数据赋值给$scope.data.arr。目前，下面的代码给出错误"Uncaught ReferenceError: scope is not defined"。我是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 !");
  }
}

——UPDATE Problem Statement.

handleFiles()函数在用户选择要解析的新csv文件时被调用。

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

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

虽然你可以通过angular的element()函数访问$scope，但看起来这段代码最好放在angular的service中。

如果这样做是出于某种原因不是一个选项，您需要一个DOM元素的引用，属于您的controller。

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

angular.element(myDomElement).scope()

，这应该给你一个参考。

你也可以使用element.find()和css选择器，但要注意，如果你没有加载JQuery，你只剩下一组有限的选择器(只有标签名)。

参见Docs中的angular.element

应该做的是复制所有的JavaScript从read-csv.js，并把它放在dataController.js下面这行:

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

定义arr为数组:

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

在作用域前面加一个'$'，这样行应该是:

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

正确的方法是将read-csv.js文件中的函数放入服务中，然后使用$rootScope处理事件。广播和$scope.$on。

所以它可能看起来像:

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;
    };
}]);
相关文章：