AngularJS：在modal-ui-bootstrap中上传文件

Question

我有一个角度模态ui，在其中我上传文件。问题是由于某种原因，文件的<input>不会触发app指令。当<input>被更改时，该指令返回文件名和大小。

这是我想得到的结果：
example

我已经尝试过任何事情，但由于某种原因我仍无法在<span>文件名中看到。

html文件：

<form novalidate ng-submit="add(Form.$valid)" name="Form">
    <div class="modal-header col-lg-12">
        <h3 class="col-lg-4 col-lg-offset-4">add file</h3>
    </div>
    <div class="modal-body">
        <div class="panel-body">
            <div class="row">
                <div class="form-group col-lg-8" ng-class="{'has-error': notPass && Form.fileName.$invalid}">
                    <label class="control-label label-add-card" for="fileName">name</label>
                    <input class="input-add-card form-control " id="fileName" name="fileName" type="text"  ng-model="fileName" ng-pattern="/^[a-z1-9]{10,}$/" ng-required="true">
                    <p ng-show="notPass && Form.fileName.$invalid" class="help-block">not good</p>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-lg-8" ng-class="{'has-error':notPass && Form.fileExplain.$invalid}">
                    <label class="control-label label-add-card" for="fileExplain">explain</label>
                    <textarea class="input-big form-control " id="fileExplain" name="fileExplain" type="text"  ng-model="fileExplain" ng-pattern="/^[a-z1-9]{1,}$/" ng-required="true"></textarea>
                    <p ng-show="notPass && Form.fileExplain.$invalid" class="help-block">not good</p>
                </div>
            </div>
            <div>
                <div class="form-group col-lg-12" ng-class="{'has-error':notPass && Form.uploadDownloads.$invalid}">

                    <input  ng-model="uploadDownloads" type="file" fd-input file-name="fileName" />
                    <input  class="btn btn-primary" type="button" value="choose" onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
                    <span class="badge badge-important">{{fileName}}</span>
                    <p ng-show="notPass && Form.uploadDownloads.$invalid" class="help-block">please choose</p>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-success col-lg-12 btn-modal-costume">add</button>
    </div>
</form> 

模态控制器：

/**
 * Created by Ariel on 22/11/2015.
 */
app.controller('uploadDownloadsController',function($scope,$modalInstance ){
    app.directive('fdInput', fdInput);
    function fdInput() {
        return {
            scope: {
                fileName: '='
            },
            link: function(scope, element, attrs) {
                element.on('change', function(evt) {
                    var files = evt.target.files;
                    console.log(files[0].name);
                    console.log(files[0].size);

                    scope.fileName = files[0].name;
                    scope.$apply();
                });
            }
        }
    };
    $scope.fileName = '';

    $scope.add = function(valid){
        if(valid){
                $scope.data = 'none';
                var f = document.getElementById('uploadDownloads').files[0];
                var r = new FileReader();
                r.onloadend = function(e){
                    $scope.data = e.target.result;
                    $scope.notPass = false;
                    $modalInstance.close({
                        'data':$scope.data,
                        'fileName':$scope.fileName,
                        'fileExplain':$scope.fileExplain
                    });
                };
            /*activate the onloadend to catch the file*/
                r.readAsBinaryString(f);
        } else {
            $scope.notPass = true;
        }
    };
    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
});

Answer 1

这是我如何做到的：

html：

<form novalidate ng-submit="add(Form.$valid)" name="Form">
.
.
.
<div>
                <div class="form-group col-lg-12" ng-class="{'has-error':notPass && Form.uploadDownloads.$invalid}">

                    <input  ng-model="uploadDownloads" class="form-control-file" id="uploadDownloads" type="file" fd-input file-names="fileNames" />
                    <input  class="btn btn-primary" type="button" value="choose" ng-click="choose()"/> <!-- on button click fire the file click event -->
                    <span class="badge badge-important">{{fileNames}}</span>
                    <p ng-show="notPass && Form.uploadDownloads.$invalid" class="help-block">you have to choose file</p>
                </div>
            </div>
.
.
.
</form>

我构建了一个direcvtive来显示上传的文件名：

/*get and shows the file name*/
app.directive('fdInput', function($timeout){
        return {
            scope: {
                fileNames: '='
            },
            link:function(scope, element, attrs) {
                $timeout(element.on('change', function(evt) {
                    var files = evt.target.files;
                    scope.fileNames = files[0].name;
                    scope.$apply();
                }),0);
            }
        }
    }); 

这是上传文件控制器：

app.controller('uploadDownloadsController',function($scope,$modalInstance,$timeout){
    $scope.fileNames = '';
    $scope.choose = function(){
        $('#uploadDownloads').trigger('click');
    };
    $scope.add = function(valid){
        if(valid){
            $scope.data = 'none';
            $scope.notPass = false;
/*this catches the file*/
            var fileInput = document.getElementById('uploadDownloads');
            var file = fileInput.files[0];
/* to send the file and the other inputs about it, need to use formData type*/
            var formData = new FormData();
            formData.append('file', file);
            formData.append('fileName', $scope.fileName);
            formData.append('fileExplain', $scope.fileExplain);
            console.log(formData);
            $modalInstance.close(formData);
        } else {
            $scope.notPass = true;
        }
    };
    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
});