Question

我对Angular来说相对较新，并且仍在努力将我的脑袋包裹在所有魔法和范围内。

我正在尝试使用预览脚本进行简单的图片上传，但我错过了最后一篇文章。

我已经设法分别完成了每项任务（上传和预览），但我一直在拼凑它。

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

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的{{1}}绑定起来。控制器。

我将如何做到这一点？

由于

Answer 1

fileinput指令使用隔离范围，需要将其更改为继承范围或将filepreview作为属性传递

使用隔离范围：

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

指令隔离范围：

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

在指令

中设置filepreview

scope.filepreview = loadEvent.target.result;

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

1 个答案: