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

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;有效地importData使用ngInclude范围上的属性覆盖原型变量.Chrome控制台的以下屏幕截图说明了这种覆盖,这是来自ngInclude的$ scope:

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

为了使您的示例正常工作,只需var $scope = this;从您的addSetReImport函数中删除它,这可以确保您引用您的范围pageCtrl.这是一个克隆的plunker,有一个工作示例:http://plnkr.co/edit/LvYGKqLlL9Pxq0X5slyM？p = preview