Question

我有一个文件dropzone来获取文件的数据内容如果我将$scope.importData设置为null，则无法再在drop handler中分配数据。

$scope.handleDrop = function(evt) {
    if (window.File && window.FileReader && window.FileList && window.Blob) {
      var files = evt.dataTransfer ? evt.dataTransfer.files : evt.target.files,
          file = files[0],
          reader = new FileReader();

      reader.onloadend = function(evt) {
          var content = evt.target.result;
          if('' !== content) {
              $scope.importData = content; //will work as long you do not set $scope.importData to null
              $scope.$apply();
          }
      };
      reader.readAsText(file);
    }
};

我发现问题可能是ng-include。如果我没有包含它，它将工作。

请尝试使用Plunker ......

http://plnkr.co/edit/BFOquRMLOqpL3arv1rtI?p=preview

Answer 1

ngInclude创建一个原型继承自其父作用域的新作用域，在plunker示例中，作为pageCtrl范围的父作用域。您的示例的问题是在$scope.addSetReImport内设置var $scope = this;，在该上下文中this指的是ngInclude的范围，而不是pageCtrl范围，因此$scope.importData = null;使用ngInclude范围的属性有效地覆盖原型importData变量。 Chrome控制台的以下屏幕截图说明了这种覆盖，这来自ngInclude的$ scope：

enter image description here

所以你最终得到两个importData个变量，一个坐在你的ngInclude的范围内，用在你的模态模板中，它指向null，第二个位于你的pageCtrl范围内在handleDrop函数期间使用。由于handleDrop将更新importData范围内的pageCtrl，因此它不会反映您的模板正在使用的ngInclude范围上设置的属性。

要让您的示例正常运行，只需从var $scope = this;功能中移除addSetReImport即可确保您引用pageCtrl的范围。这是一个克隆的plunker，有一个工作示例：http://plnkr.co/edit/LvYGKqLlL9Pxq0X5slyM?p=preview

范围变量和Angular中的ng-include不协调

1 个答案: