javascript - Angular 文件上传指令不更新 Controller 模型

Question

我正在尝试关注这个 [tutorial]但无法正常工作。

我的 Angular Controller 正在为在我的指令中创建的模型记录 undefined。这是一个 [JSFiddle]它的工作创造了我的教程作者。

问题是 View 可以找到 $scope.myFile 而 Controller 却找不到($scope.myFile 是 undefined)。

View 显示 {{ myFile.name }}(例如 my-image.jpg)。 myFile 变量是一个包含所选文件数据的 JS 对象。这很好用。该指令似乎正在为模型分配所选文件的值(并因此在 View 中正确显示)。

<input file-model="myFile" type="file"/ >
<div class="label label-info">
  {{ myFile.name }}
</div>
<button ng-click="uploadDocs()">Click</button>

这是我从 [tutorial] 得到的指令.

由于输入类型 file 不能使用 ng-model，该指令将模型设置为与 file 输入相关联，每次文件触发 change 事件时分配给它。

directive('fileModel', [
  '$parse',
    function ($parse) {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          var model = $parse(attrs.fileModel);
          var modelSetter = model.assign;

          element.bind('change', function(){
            scope.$apply(function(){
              if (element[0].files.length > 1) {
                modelSetter(scope, element[0].files);
              }
              else {
                modelSetter(scope, element[0].files[0]);
              }
            });
          });
        }
      };
    }
  ]).

在 Controller 中，我只记录 $scope.myFile。这是从上面 HTML 中的按钮调用的。理想情况下，我会在此处将文件上传到服务器，但我不能，因为 $scope.myFile 未定义。

$scope.uploadDocs = function() {
  var file = $scope.myFile;
  console.log($scope.myFile);
};

有人能告诉我为什么 View 会收到 $scope.myFile 但 Controller 会为 $scope.myFile 记录 undefined 吗？

Answer 1

我在尝试从 Controller 访问指令的变量时遇到了同样的问题。在我的例子中，我可以使 myFile 可用于 Controller ，但我必须从指令中将其分配给 scope.$parent.$parent.myFile。我不想为了访问变量而在祖先的深度中进行硬编码，所以我最终使用服务在指令和 Controller 之间共享变量:

.factory('fileService', function() {
    var files = [];
    return files;
})

我的指令代码更改为使用服务而不是教程中使用的 attrs.fileModel:

.directive('fileModel', ['$parse', 'fileService', function ($parse, fileService) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            element.bind('change', function(){
                scope.$apply(function(){
                    if (element[0].files != undefined) {
                        fileService.push(element[0].files[0]);
                        console.log('directive applying with file');
                    }
                });
            });
        }
    };
}])

然后，在将 fileService 注入(inject) Controller 后，我可以直接从 fileService 访问文件:

$scope.uploadDocs = function() {
    console.log(fileService);
};