在指令中收到的範圍與指令真正生活的範圍不一樣

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創建了一個你傳入的子範圍，所以你可能會遇到與原始值有關的原型繼承問題。