在指令中收到的范围与指令真正生活的范围不一样

Question

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

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

而且我也有一个引导的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> 

与其对应的引导，UI CONTRO米勒：

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

    ... 
}; 

所以...如果你注意到了三点意见：

1. 首评// DEBUG
2. 二评论// DEBUG
3. 评论// empty!

看来，由指令使用的范围是不一样的，其中<input type="file">是生活的范围，也正因为如此，我得到一个空文件。

我在做什么样的范围错误？

而且我应该指出，这个工作得很好，而无需使用引导界面模态...所以它必须有一些与模态

Answer 1

两件事情的范围做测试：

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