AngularJS：图片上传+ FileReader预览。控制器，指令和范围之间的故障绑定

我对Angular相对较新，并且仍然试图将我的头围绕在所有的魔法和范围之内。AngularJS：图片上传+ FileReader预览。控制器，指令和范围之间的故障绑定

我想用预览脚本做一个简单的图片上传，我错过了最后一部分。

我已经成功完成了每项任务（上传和预览），但是我一直在拼凑在一起。

这是到目前为止我的代码：

的Javascript

angular.module('fileUpload', []) 
    .controller("upload", ['$scope', '$http', function($scope, $http) { 
    $scope.$watch('file', function(file) { 
     console.log("arguments", file); 
    // Upload file via $http, formdata & transformRequest 
    }); 
    }]) 
    .directive("fileinput", [function() { 
    return { 
     scope: { 
     fileinput: "=" 
     }, 
     link: function(scope, element, attributes) { 
     element.bind("change", function(changeEvent) { 
      scope.fileinput = changeEvent.target.files[0]; // Trigger $watch in controller 

      var reader = new FileReader(); 
      reader.onload = function(loadEvent) { 
      scope.$apply(function() { 
       // Should add the base64 for my filepreview variable 
       scope.filepreview = loadEvent.target.result; 
      }); 
      } 
      reader.readAsDataURL(scope.fileinput); 
     }); 
     } 
    } 
    }]);

HTML

<input type="file" fileinput="file" /> 
<img ng-src="{{filepreview}}" class="image"/>

所以，你可能会看到，我结合在中的FileInput指令控制器中的$ scope.file。有用。当文件输入发生变化时，控制器中的文件变量会获取正确的数据，以供我发送并上传。我现在的问题是，我在指令中使用fileinput来调用FileReader，运行readAsDataURL，然后在完成时听取它，将其应用到示波器，然后停止。我想更新变量filepreview，以便在模板中进行更新（请参阅HTML和IMG），但我无法弄清楚如何连接两者。 filepreview不应保存，只是向用户显示他们刚选择的图像。

所以，基本上，我想要将scope.filepreview与filepreview结合起来。控制器。

我该怎么做呢？

由于

来源

2016-03-21 Mestika

fileinput指令采用隔离范围，它需要被改变成任一继承范围或通过filepreview作为属性

用分离的范围使用：

<input type="file" fileinput="file" filepreview="filepreview"/>

指令分离范围：

scope: { 
     fileinput: "=" 
     filepreview: "=" 
     },

设置filepreview内部指令

scope.filepreview = loadEvent.target.result;

来源

2016-03-21 16:53:16 rupampatel

Wauw就是这么简单。我一直徘徊在你提出的解决方案附近，但不是在文件输入上创建新的范围，而是试图将'fileinput''绑定到两个不同的指令范围。非常感谢：-） – Mestika

AngularJS：图片上传+ FileReader预览。控制器，指令和范围之间的故障绑定

回答

相关问题