Question

我有一个我可以这样使用的指令：

<input type="file" ng-file-select="onFileSelect($files)" multiple>

这在主范围内效果很好，但是当我尝试在转发器中使用它然后在内部包含：

<div ng-repeat="tab in tabs">
    <div ng-include="tab.url"></div>
</div>

tab.url：

<input type="file" ng-file-select="onFileSelect($files)" multiple>

它停止工作，没有数据发送到示波器。

ngFileSelect指令：

app.directive("ngFileSelect", function () {
    return {
        link: function ($scope, el) {
            el.bind("change", function (e) {
                for (var i = 0; i < e.target.files.length; i++) {
                    $scope.file = (e.srcElement || e.target).files[i];
                     $scope.getFile();
                }
            });
        }
    };
});

在我的控制器中，我有：

$scope.getFile = function() {
    fileReader.readAsDataUrl($scope.file, $scope)
        .then(function(result) {
            $scope.images.push(result);
        });
};

如何在选项卡中访问所包含文件中选择的文件？

Answer 1

尝试：

$scope.getFile = function() {
    var currentScope = this; //access the file from current scope instead of from $scope which is always your controller's scope

    fileReader.readAsDataUrl(currentScope.file, currentScope)
        .then(function(result) {
            currentScope.images.push(result);
        });
};

原因是范围继承，ng-repeat和ng-include创建子范围。所选文件将分配给子范围：

$scope.file = (e.srcElement || e.target).files[i];

然后致电：

$scope.getFile(); //this is inherited from parent scope (controller)

在getFile函数中，您正在访问未分配$scope.file的{{1}}（您的控制器范围）。

如何使用AngularJs从子作用域访问$文件

1 个答案: