TypeError: Illegal invocation -- when $watch data contains File object angularJS

951 views Asked by At

I have a object called models.questions, I am using $watch to monitor its change(deep watch, monitoring the entire object of models.questions). Sth like:

$scope.$watch('models.questions', function (newVal, oldVal) {
     do sth...
}

models.questions may contain data like this:

{
  "Question": {
    "Description": "",
    "Index": "",
    "QuestionType": "StaticElement",
    "tag": "This is a static element",
    "originalName": "Static - Label/Link/Image",
    "Title": "",
    "Required": true,
    "Dynamic": "",
    "Dependency": "",
    "Hidden": false,
    "Options": [],
    "displayOptions": [
      "x.png"
    ]
  },
  "Dependencies": {
    "RelationBetweenOptions": "",
    "Action": "",
    "OptionsForSelect": [],
    "DependencyOptions": []
  }
}

My code works fine until recently. I need to put some File type object into "Options". I used to put string or int type into "Options", the code works.

But once I put a File type object into it. When the code executes $watch, I got error as

 angular.js:14525 TypeError: Illegal invocation
at sa (angular.js:1205)
at sa (angular.js:1189)
at sa (angular.js:1205)
at sa (angular.js:1205)
at sa (angular.js:1189)
at m.$digest (angular.js:17993)
at m.$apply (angular.js:18269)
at angular.js:20186
at e (angular.js:6274)
at angular.js:6554

The file object is the file that user selected to upload. Sth like:

<md-input-container ng-if="item.Question.Required">
        <button ngf-select ngf-change="upload($files,$index)" multiple="multiple">Add+</button>
</md-input-container>

The upload function as following:

 $scope.upload = function (file, index) {
     if ($scope.models.questions[index].Question.displayOptions === undefined) {
    $scope.models.questions[index].Question.displayOptions = [];
  }

  for (var i = 0; i < file.length; i++) {
    var count = 0;
    var tmpFileName = file[i].name;
    while ($scope.models.questions[index].Question.displayOptions.indexOf(tmpFileName) !== -1) {
      tmpFileName = file[i].name + '(' + count + ')';
      count++;
    }
    $scope.models.questions[index].Question.displayOptions.push(tmpFileName);
    $scope.models.questions[index].Question.Options.push(file[i]);   
  }
};

I have no clue how to debug this. Does anyone know what causes this error? Thank you.

0

There are 0 answers