首页 文章

如何在Datatable - AngularJS的单元格内观察type =“files”

提问于
浏览 次
0

我正在尝试在Datatable的单元格内创建一个上传按钮，我有一个clickHandler用于click事件 . 上传按钮称为窗口资源管理器，我可以选择要上载的文件 . 为了将文件上传到服务器，我使用$ watch来检查模型“文件”的变化，如果有任何变化，它将触发上传功能 . 此功能将文件上传到服务器 . 但似乎$ watch永远不会看到数据表内部发生了什么 . 这是我的代码：

我正在使用angular-file-upload，它似乎适用于我没有在数据表中使用上传按钮的网站的其他部分 .

当我运行代码时，它弹出警报（“测试”）和窗口以选择文件，但它从不调用服务器 . 浏览器上无法看到网络呼叫 .

有人能告诉我我的代码有什么问题吗？谢谢 .

视图：

<td><a class="btn btn-primary" ng-file-select ng-model="files" ng-multiple="true">Upload documents</a> </td>

单击事件：

$('td:eq(11)', nRow).bind('click', function () {
        $scope.$apply(function () {
            $scope.clickHandler(aData);

        });

    });

$ watch controller：

$scope.clickHandler = function (data) {
    //alert('upload document');        
    var appList = JSON.parse($window.sessionStorage.getItem(Constant.ApplicationKey));
    var id = data[0];

    angular.forEach(appList, function (v) {
        if (v.PersonID == id) {
            $scope.selectedUserName = v.FirstName + " " + v.LastName;
            return;
        }
    })
    $scope.$watch('files', function () {
        $scope.upload($scope.files);
        alert("test");
    })

}

上传功能

$scope.upload = function (files) {
    if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            $upload.upload({
                url: Constant.BaseUrl + 'api/User/UploadFile',
                params: { username: $scope.selectedUserName, Role: 'Student' },
                file: file
            }).progress(function (evt) {
                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                console.log('progress: ' + progressPercentage + '% ' +
                            evt.config.file.name);
            }).success(function (data, status, headers, config) {
                console.log('file ' + config.file.name + 'uploaded. Response: ' +
                            JSON.stringify(data));
            });
        }
    }
};
angularjs angularjs-directive

1 回答

  • 0

    每次单击按钮时都不应创建新的观察者 . $scope.$watch(...) 每次都会注册一个新的观察者，你可能会遇到问题 .

    你不能只是在用户点击后上传文件吗？另外，尝试不使用jQuery事件监听器，但角度 ng-click 而不是soyou没有模型/视图不一致：

    HTML：

    <td ng-click="onClick(files)"> ... </td>

    控制器：

    $scope.onClick = function (files) {
  console.log('Handler clicked with files:', files);
  if (files) {
    console.log('Uploading files');
    $scope.upload(files);
  }
};

    实际上，当你点击确切的位置时，你想运行上传？我想你需要等到用户选择文件模态并选择他想要上传的文件 .

    回复于

相关问题