【发布时间】：2013-10-08 02:28:57
【问题描述】：
一旦我读取了我拖放的文件，我希望 Angular 触发 ng-show，以便它将文件输出为图像，源为 dataUrl。我需要能够在上传之前在本地读取文件，以便我的应用程序正常工作。我测试了我所有的事件处理程序 dragenter、dragover、drop，它们都在触发，我正在使用 $scope.setDataUrl 函数及其触发设置 $scope.dataUrl 变量，但 ng-show 仍然不会评估变量并显示 div .我对图像格式等进行了很多验证......但为了简单起见，我将其删除，以便解决变量的问题。 d
我是否需要使用路由，或者使用工厂方法与另一个对象共享它以触发事件并显示 div？
这是我的索引文件
<!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>
这是我的脚本文件 (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);
}
}
});
【问题讨论】：
标签： javascript angularjs drag-and-drop filereader