指令中收到的范围与指令实际存在的范围不同

Question

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

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

    ...
};

所以...如果您注意到三个 cmets：

1. 第一条评论// DEBUG
2. 第二条评论// DEBUG
3. 评论// empty!

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

我在使用范围时做错了什么？

另外我应该提到，这在不使用引导 ui-modal 的情况下工作得很好......所以它必须与模态的范围有关

Answer 1

要测试的两件事：

1. 验证您的uploadFile 函数是否在 指令的事件处理程序之后调用（因为它们正在侦听相同的事件）。如果不是，则应将fileModel 指令的优先级提高到大于ngChange 的优先级（即0）。
2. 尝试使用resolve 属性将数据传递到您的模式，而不是创建一个新范围。根据文档，$modal 创建了您传入的子范围，因此您可能会遇到原始值的原型继承问题。