javascript - AngularJS:图片上传+ FileReader预览。 Controller ，指令和作用域之间的绑定(bind)困难

我是Angular的新手，并且仍在尝试将自己的头包裹在魔术和作用域上。

我正在尝试使用预览脚本进行简单的图像上传，但我遗漏了最后一部分。

我已经设法分别完成每个任务（上传和预览），但是我坚持将它们拼凑在一起。

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

Java脚本

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。有用。触发文件输入的更改时，控制器中的file变量正在获取正确的数据供我发送和上传。
我现在的问题是，我正在指令中使用fileinput调用FileReader，运行readAsDataURL，然后侦听完成后，将其应用于范围，在此我停下来。我想更新变量filepreview，以便在模板中对其进行更新（请参见HTML和IMG），但是我根本无法弄清楚如何将两者连接起来。
filepreview不应保存，而只是向用户显示他们刚刚选择的图像。

因此，从本质上讲，我想将scope.filepreview与filepreview绑定在一起，例如控制器。

我将如何去做？

谢谢

最佳答案

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

使用隔离范围用法：

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

指令隔离范围：

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

设置filepreview内部指令

scope.filepreview = loadEvent.target.result;