All geek questions in one place

AngularJS Error: Inappropriate Model Expression

I saw that this question was asked several times, but I could not understand how the answers relate to my problem. I keep getting this error while trying to upload a file.

Error: Non-assignable model expression: undefined (directive: fileReader)

How could I solve this?

I have included all the files that interact with each other, although I am pretty sure that the error occurs in fileDirective.js

fileDirective.js. contains this directive:

 spreadsheetApp.directive('fileReader', function() { return { scope: { file: '=' }, restrict: 'E', template: "<input type='file' onchange='angular.element(this).scope().upload(this)'>", link: function (scope, element, attrs) { scope.upload = function (element) { scope.$apply(function (scope) { scope.file = element.files[0]; }); }; scope.$watch('file', function () { if (scope.file) { var reader = new FileReader(); reader.onload = (function (file) { return function (env) { scope.$apply(function () { scope.file.contents = env.target.result; }); } }(scope.file)); reader.readAsText(scope.file); } }, true); } }; });

(It was actually borrowed from here .)

index.html:

 <html ng-app="spreadsheetApp"> ... <ng-view></ng-view> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="js/app.js"></script> <script src="js/directives/fileDirective.js"></script> <script src="js/controllers/spreadsheetController.js"></script> ... </html>

app.js: "use strict";

 var spreadsheetApp = angular.module('spreadsheetApp',[]); spreadsheetApp.config(function($routeProvider) { $routeProvider. when('/', { controller: 'spreadsheetController', templateUrl: 'views/innerHTML.html' }); });

And the contents of innerHTML.html is simple: <file-reader> </file-reader>

+5
source share
3 answers

It seems to me that you have not determined that the fileReader directive belongs to the correct module.

Try adding this top line:

  var spreadsheetApp = angular.module('spreadsheetApp'); spreadsheetApp.directive('fileReader', function() { return { scope: { file: '=' }, restrict: 'E', template: "<input type='file' onchange='angular.element(this).scope().upload(this)'>", link: function (scope, element, attrs) { ...

Or even better:

  angular.module('spreadsheetApp').directive('fileReader', function() { return { scope: { file: '=' }, restrict: 'E', template: "<input type='file' onchange='angular.element(this).scope().upload(this)'>", link: function (scope, element, attrs) { ...

JSFiddle download work file.

0
source

Having the same problem, look at this updated script: http://jsfiddle.net/Kc8VJ/1/ initializing a file attribute does the trick, but why is it necessary?

 <div ng-app="spreadsheetApp" ng-init='fileOut=null'> <file-reader file='fileOut'> </file-reader>
0
source

The only thing missing in your example is binding to some scope scope property:

 <file-reader file="someParentScopeProperty"></file-reader>

What happened:

  • The file property is defined using '=' . In this case, AngularJS tries to establish a bi-directional binding between this property and some scope parent property, the name is determined through the file attribute.

  • To define the property of the parent scope, just add the file attribute. Property should not be initialized (no need for ng-init ) and explicitly declared. AngularJS will create it for you.

  • In your case, the file attribute is missing, so the binding is not configured correctly. As a result, the first time you try to assign a value to a local property, you will get a "Not Assignable" error. This happens on the line:

     scope.file = element.files[0];

Here you can find more on this topic: http://docs.angularjs.org/api/ng.$compile

0
source

Source: https://habr.com/ru/post/1491721/

More articles:


All Articles