javascript - 使用 Angular UI Bootstrap 模式访问 Controller 中的文件输入

Question

我有一个问题要问所有 AngularJs 专家。我正在尝试创建模式，其中用户可以提交文件进行上传。我已经解决了大部分问题，但是，我似乎遇到了有关范围的问题。我使用的技术是 Angularjs、Angular UI Bootstrap 和自定义文件模型指令。

我有一个自定义 fileModel 指令，它在文件选择时更新范围:

app.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() {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    }
}]);

我使用 UI bootstrap 根据文档 ( http://angular-ui.github.io/bootstrap/#/modal ) 创建模式。请注意输入字段中的 file-model="file"指令，这就是我要访问的内容。

<div ng-controller="ModalDemoCtrl">

    // Button to open model
    <button class="btn btn-default" data-ng-click="open()">Upload File</button>

    // Simple Form in model
    <script type="text/ng-template" id="myModalContent.html">
        <form name="form.myForm" class="form-horizontal" data-ng-submit="addFile()" role="form" novalidate>

            <div class="modal-header">
                <h3 class="modal-title">Upload File</h3>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="file" class="col-sm-2 control-label">Input File</label>
                    <div class="col-sm-10">
                        <input type="file" name="file" file-model="file">               
                    </div>
                </div>  
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-default">Submit</button>
            </div>

       </form>
   </script>

</div>

最后，我有 Controller ，再次按照 Bootstrap UI 文档。请注意我尝试访问 $scope.file 的位置。

app.controller('ModalDemoCtrl', ['$scope', '$http', '$modal', function ($scope, $http, $modal) {

    $scope.open = function () {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: ModalInstanceCtrl,
            resolve: {
                $http: function () {
                    return $http;
                }
            }
        });

        modalInstance.result.then(function () {
            // do something
        }, function () {
            // do something
        });
    };

}]);

var ModalInstanceCtrl = function ($scope, $modalInstance, $http) {

$scope.addFile = function() {
    var formData = new FormData();
    formData.append('file', $scope.file);
    $http.post(            
        '/valid/ajax/url', formData, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).success(function(data, status, headers, config) {
            // do something on success
        });
    );
};

我知道使用 Angular UI Bootstrap 时，模态范围内存在一些问题...不幸的是，我没有足够的经验来找到解决方案。目前，我无法访问用户选择通过 ajax 发送的文件。请帮忙。谢谢。

Answer 1

我看到变量“$scope.file”没有被设置，它保持未定义状态。因此您无法发布该文件。在 Controller (有两个，模态 Controller 和父 Controller )之间共享数据的一种简单方法是使用服务或工厂。如果您不确定，请检查文档。然后您可以通过服务/工厂更改保存文件并在两个 Controller 中使用它。

首先，服务只包含一个 getter 和一个 setter:

app.service('fileService', function () {
    var file;
    var fileService = {};

    fileService.getFile = function () {
        return file;
    };

    fileService.setFile = function (newFile) {
        file = newFile;
    };

    return fileService;
});

然后，您可以通过指令和 Controller 上的依赖项注入(inject)来使用该服务:

app.directive('myFileUpload', function (fileService) {
    return function (scope, element) {
        element.bind('change', function () {
            fileService.setFile(element[0].files[0]);
        });
    }
});

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, $http, fileService) {

    $scope.addFile = function () {
        var file = fileService.getFile();
        console.log(file);
        $http.post(
            'http://posttestserver.com/post.php', file, {
                transformRequest: angular.identity,
                headers: {'Content-Type': file.type}
            }).success(function (data, status, headers, config) {
                console.log(data);
            });
    };
});

我创建了一个 fiddle ，以便您可以在那里测试它。该文件在控制台上输出。为了测试这篇文章，我使用了 http://posttestserver.com/post.php

http://jsfiddle.net/dz5FK/