ng-file-upload 文件浏览器不显示数据表生成的元素

Question

我正在使用数据table生成动态内容，其中一个 table 单元格有一个按钮。此按钮应触发页面控制器的文件上传功能。但是当我点击它时没有任何反应（即使没有记录 TEST 功能也不会触发）。

这是文件上传处理函数：

$scope.uploadFile = function (file) {
    //DBG
    console.log('TEST'); //No TEST is logged to console at this point
    Upload.upload({
        url: '/file-upload',
        data: {file: file}
    }).then(function (resp) {
        console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
    }, function (resp) {
        console.log('Error status: ' + resp.status);
    }, function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
    });
};

而 html 是动态生成的数据 table，如下所示：

<button class="btn button btn-default button-table" ngf-select="uploadFile($file)"><i class="fa fa-plus-circle"></i></button>

我想这是点击事件没有动态触发文件浏览器的问题，我不知道如何用这个插件强制触发文件选择事件。

Answer 1

我通过创建静态隐藏按钮解决了这个问题：

<button id="button-upload-real" style="display: none" ngf-select="uploadFile($file)"></button>

并从动态生成的数据表单元格上的按钮触发点击事件。现在像瑞士钟一样工作了。

ng-file-upload 文件浏览器不显示数据表生成的元素

ng-file-upload file browser not showing with datatables generated element

datatables

angularjs

ng-file-upload