Question

我有这个指令，它基本上通过file-model="..."将文件附加到模型（该指令的全部目的是因为ng-model在{j}中的<input type="file">中不起作用< / p>

angular.module('myApp').directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            console.log(scope); // DEBUG

            var model = $parse(attrs.fileModel);

            element.bind('change', function() {
                scope.$apply(function() {
                    model.assign(scope, element[0].files[0]);
                });

                if (attrs.ngChange) {
                    scope.$apply(attrs.ngChange); 
                }
            });
        }
    };
}]);

我还有一个bootstrap-ui模式， modal.html：

<div class="modal-body">   
    <div class="form-group">
        <input type="file" file-model="excelFile" ng-model="dummy" ng-change="uploadFile()" />
    </div>
</div>

使用相应的bootstrap-ui控制器：

angular.module('myApp').controller('modalController', ['$scope', '$modalInstance', '$scope', function ($scope, $modalInstance, $scope) {

    $scope.uploadFile = function() {
        console.log($scope); // DEBUG

        var formData = new FormData();
        formData.append('file', $scope.excelFile); // empty!

        ...
    };
}]);

我从另一个控制器调用模态：

$scope.openModal = function () {

    var modalScope = $scope.$new();

    modalScope.somePassedData = "I pass data this way";

    var modalInstance = $modal.open({
        templateUrl: 'views/modal.html',
        controller: 'modalController',
        scope: modalScope,
    });

    ...
};

所以...如果您注意到三条评论：

第一条评论// DEBUG
第二条评论// DEBUG
评论// empty!

该指令使用的范围似乎与<input type="file">生活的范围不同，因此我得到一个空文件。

我对范围做错了什么？

另外我应该提一下，如果没有使用bootstrap ui-modal，这个工作正常......所以它必须与模态的范围有关

Answer 1

要测试两件事：

验证您的uploadFile函数在指令的事件处理程序之后被调用（因为它们正在侦听同一事件）。如果不是，则应将fileModel指令的优先级提高到大于ngChange（即0）的优先级。

尝试使用resolve属性将数据传递到模式而不是创建新范围。根据文档，$modal创建了您传入的子范围，因此您可能会遇到具有原始值的原型继承问题。

指令中收到的范围与指令真正存在的范围不同

1 个答案: