使用 Angular UI Bootstrap 模式访问控制器中的文件输入

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 引导程序根据文档 (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>

最后我有控制器，再次根据 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 引导程序时，模态范围内的范围存在一些问题......不幸的是，我没有足够的经验来找到解决方案。目前，我无法访问用户选择通过 ajax 发送的文件。请帮忙。谢谢。

Answer 1

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

首先是只包含 getter 和 setter 的服务：

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

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

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

    return fileService;
});

然后您可以通过对指令和控制器的依赖注入来使用该服务：

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);
            });
    };
});

我创建了一个小提琴，以便您可以在那里进行测试。该文件在控制台上输出。为了测试我使用的帖子http://posttestserver.com/post.php

http://jsfiddle.net/dz5FK/