Javascript 范围变量和ng包含在角度中不协调

我有一个文件放置区来获取文件的数据内容。
如果我将

$scope.importData

设置为null，则无法再在drop处理程序中分配数据

$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包含。如果我在没有包含的情况下这样做，它就会起作用

请尝尝普朗克

---

ngInclude创建一个新的作用域，该作用域通常从其父作用域继承，在plunker示例中，父作用域是

pageCtrl

的作用域。您的示例的问题是，在

$scope.addSetReImport

中，您正在设置

var$scope=this

在该上下文中，此指的是ngInclude的作用域，而不是您的

pageCtrl

作用域，因此

$scope.importData=null

使用ngInclude作用域上的属性有效覆盖prototype

importData

变量。以下来自Chrome控制台的屏幕截图说明了这种覆盖，这来自ngInclude的$scope：

因此，您将得到两个

importData

变量，一个位于ngInclude的作用域中并在模式模板中使用，该模板指向null，另一个位于

pageCtrl

作用域中，在

handleDrop

函数中使用。由于

handleDrop

将更新

pageCtrl

范围上的

importData

，因此它不会反映模板正在使用的ngInclude范围上的属性集

---

要使示例正常工作，只需删除

var$scope=this

从

addSetReImport

函数中，这确保您引用的是

pageCtrl

的范围。下面是一个克隆的plunker，其中有一个工作示例：

在继续您的项目之前，请确保先阅读Angular文档。DOM和事件管理应该从指令内部处理，而不是从控制器中处理。@Stewie好的，我更新了代码并为事件添加了指令。但问题在于same@BenjaminGruenbaum我改进了这个问题。希望没问题，非常感谢。我没想到会这么容易。