I want angular to trigger ng-show once I read the file that I am dragging and dropping so it will output the file as an image with the source as a dataUrl. I need to be able to read the file locally prior to upload in order for my app to work properly. I test all my event handlers dragenter, dragover, drop, they are all firing, I am setting a $scope.dataUrl variable with $scope.setDataUrl function and its firing but ng-show still won't evaluate the variable and show the div. I had alot of validation for the image format and etc... but for the sake of simplicity I removed it so I can get at the problem with the variable. d
do I need to use a route, or use the factory method to share it with another object for the event to fire and the div to be shown?
Here is my index file
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<script src="Scripts/angular-1.0.7.min.js"></script>
<script src="app/dd.js"></script>
<style>
html, body { height:100%; background-color:#e3e3e3; }
</style>
</head>
<body dd="">
<div ng-show="dataUrl">
dataUrl is defined!
</div>
</body>
</html>
here is my script file (app/dd.js) var app = angular.module('myApp', []);
function myController($scope, $http) {
$scope.dataUrl = null;
$scope.setDataUrl = function (data) {
$scope.dataUrl = data;
console.log($scope.dataUrl);
}
}
app.directive('dd', function () {
return {
restrict: "A",
controller:"myController",
link: function (scope, element, attr, ddCtrl) {
function handleDragEnter(e) {
console.log('dragEventer function');
}
function handleDragOver(e) {
console.log('dragOver function');
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = "copy";
}
function handleDrop(e) {
e.preventDefault();
e.stopPropagation();
var files = e.dataTransfer.files;
var file = files[0];
console.log(file);
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
scope.setDataUrl(data);
}
reader.readAsDataURL(file);
}
element.bind('dragenter', handleDragEnter);
element.bind('dragover', handleDragOver);
element.bind('drop', handleDrop);
}
}
});
