Angular.js范围传递文件读取器错误

时间:2013-07-17 21:05:42

标签: html5 file angularjs filereader

我正在尝试将文件中的文本保存到rootscope内的字符串中。到目前为止我所拥有的是一个正确加载的指令,以及一个检查根

的函数
function callData($rootScope) {
    console.log("function working");
    console.log($rootScope.data);
}

angular.module('spreadsheetApp').directive('fileReader', function($rootScope) {
    return {
        restrict: 'E',
        scope: true,
        templateUrl:'views/fileReaderTemplate.html',
        controller: 'fileReaderController',
        link: function (scope, element, attributes, controller) {
            $element.bind("change", function(event) {
                var files = event.target.files;
                var reader = new FileReader();
                reader.onload = function() {
                    $rootScope.data = this.result;
                    console.log($rootScope.data);
                    callData($rootScope.data);
                    console.log("55");
                };                
                reader.readAsText(files[0]);
            });
        } 
    }    
});

返回以下文本文件的输出:

# Text file
Hello, world!

输出:

Hello, world!
function working 
fileDirective.js:44
Uncaught TypeError: Cannot read property 'data' of undefined fileDirective.js:45
callData fileDirective.js:45
reader.onload

1 个答案:

答案 0 :(得分:1)

由于您尝试访问函数外部的范围,因此需要执行一些额外操作。

您的问题的答案已在此处得到解答: AngularJS access scope from outside js function

您需要使用此代码:

 var scope = angular.element($("#yourelement")).scope();

cfr。:http://jsfiddle.net/arunpjohny/sXkjc/8/