Angular Directive scope undefined - angularjs

Question

I'm using a directive to parse a xls file and pass the data to a button via scope. The problem is that within the link function I'm binding to the element change event and calling a function that parses the xls file, but scope is undefined within the handleFile function, so I can't pass the data on to the button. What's the correct way to get the data to the button?
angular.module('fileReaderModule')
.directive('xlsReader', function(){
return {
scope: {
search: "&"
},
link: function(scope, e, attr) {
e.bind('change', handleFile);
},
template: '<input type="file" ng-model="xlsFile"><button ng-click="search({stuff: scope.stuff})">Search</button>'
}
function handleFile(scope, e) {
var files = e.target.files;
var i,f;
for (i = 0, f = files[i]; i != files.length; ++i) {
var reader = new FileReader();
var name = f.name;
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
scope.stuff = workbook.Strings; // scope not available here
/* DO SOMETHING WITH workbook HERE */
var result = {};
workbook.SheetNames.forEach(function(sheetName) {
var roa = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
if(roa.length > 0){
result[sheetName] = roa;
}
});
};
reader.readAsBinaryString(f);
}
}
})

Answer 1

Inside the templates you don't need to use scope.
Replace this:
template: '<input type="file" ng-model="xlsFile"><button ng-click="search({stuff: scope.stuff})">Search</button>'
with this:
template: '<input type="file" ng-model="xlsFile"><button ng-click="search({stuff: stuff})">Search</button>'
You should also declare your function like this:
angular.module('fileReaderModule')
.directive('xlsReader', function($timeout){
return {
scope: {
search: "&"
},
link: function(scope, e, attr) {
e.bind('change', scope.handleFile);
scope.handleFile(e) {
var files = e.target.files;
var i,f;
for (i = 0, f = files[i]; i != files.length; ++i) {
var reader = new FileReader();
var name = f.name;
reader.onload = function(e) {
//Async code, need $timeout call so angular runs a digest cycle and updates the bindings
$timeout(function(){
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
scope.stuff = workbook.Strings;
var result = {};
workbook.SheetNames.forEach(function(sheetName) {
var roa = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
if(roa.length > 0){
result[sheetName] = roa;
}
});
});
};
reader.readAsBinaryString(f);
}
}
},
template: '<input type="file" ng-model="xlsFile"><button ng-click="search({stuff: stuff})">Search</button>'
});