Angular.js scope passing file reader errors

Question

I am trying to save the text from a file into a string inside the rootscope. What I have so far is a directive, which loads properly, and a function which checks the root

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

Which returns the following ouput for a textfile that says:

# Text file
Hello, world!

Output:

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

Community · Accepted Answer · 2017-05-23 10:25:34Z

1

Since you're trying to access the scope outside the function, this requires some extra actions.

The answer to your question has already been answered here: AngularJS access scope from outside js function

You need to use this code:

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

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

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Jul 17, 2013 at 21:14

Kristof Feys

1,8421 gold badge20 silver badges36 bronze badges

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

2 Comments

user1876508 Over a year ago

How can I just access the rootScope, without requiring angular.element?

Kristof Feys Over a year ago

As you want to pass the rootscope in the function, you'll need to do callData($rootScope); instead of callData($rootScope.data); because what you're now trying to do in callData function is actually $routScope.data.data which doesn't exist, hence the error...

Collectives™ on Stack Overflow

Angular.js scope passing file reader errors

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related