Danial Farid版ng-file-upload v10 同页面多实例模型为空问题

同一页面完全支持创建任意多个ng-file-upload上传器实例，你遇到的绑定模型为空问题属于AngularJS作用域绑定的通用问题，可通过以下步骤排查修复：

• 检查变量初始化逻辑：AngularJS的原型继承机制下，如果ng-model绑定的变量未在控制器父作用域提前声明，会导致选中的文件被写入到ng-file-upload生成的子作用域中，你访问控制器作用域的同名变量自然为空。建议在控制器中提前初始化$scope.partialFiles = []，或者使用「点语法」规避作用域隔离问题，比如绑定为ng-model="uploadModel.partialFiles"，同时在控制器中提前声明$scope.uploadModel = {partialFiles: []}。
• 优先使用内置变量传参：ng-file-upload内置了$files变量直接返回当前选中的文件列表，你可以将触发函数修改为ngf-select="onPartialSelect($files);"，不需要依赖自定义绑定的模型传参，直接在函数内读取$files即可拿到选中的文件内容，稳定性更高。
• 检查联动逻辑冲突：你的第一个上传器的显示逻辑包含&& !partialFiles.length的限制，确认你没有写其他联动清空partialFiles的逻辑，避免文件刚赋值就被清空。
• 版本兼容检查：如果你使用的ng-file-upload版本低于12.2.13，存在多实例场景下模型覆盖的已知bug，升级到最新稳定版即可解决。

修复后代码示例 #

页面代码 #

<div
    class="btn btn-success btn-lg btn-outline offset-sm-2 col-sm-8" 
    id="partialSelectButton" name="partialUpload"
    ng-show="canSelect && !isProcessing && fileReaderSupported"
    ng-id="odsPartialSelect" tabindex="0"
    ngf-accept="selectedUploadType.expected_file_type"
    ng-model="uploadModel.partialFiles" 
    ngf-keep="'distinct'"
    ngf-select="onPartialSelect($files, uploadModel.partialFiles);"
    ngf-multiple="true"
>
    Click to add or replace files
</div>

控制器代码 #

// 控制器中提前初始化绑定对象，规避作用域问题
$scope.uploadModel = {
    selectedFiles: [],
    partialFiles: []
};

$scope.onPartialSelect = function($files, boundFiles) {
    // 优先读取内置$files变量，和绑定的模型值做双重校验
    console.log('选中的文件列表：', $files, boundFiles);
    // 后续写自己的业务逻辑即可
}

内容的提问来源于stack exchange，提问作者ODelibalta