AngularJS Error: [$compile:nonassign]

Question

I get this error from a custom directive i have wrote:

Error: [$compile:nonassign] http://errors.angularjs.org/1.2.16/$compile/nonassign?p0=&p1=fileUpload
    at Error (native)
(anonymous function) angular.js:9778
(anonymous function) angular.js:7216
h.$digest angular.js:12270
h.$apply angular.js:12516
oFReader.onload file-upload.js:81

The directive code on line 81 of file-upload.js (oFReader.onload file-upload.js:81) is:

scope.fileUploadImage = attachment;
scope.fileUploadLoading = false;

scope.$apply(); //line 81

scope.fileUploadCallback();

Here is the where I call the directive in my view file:

<div file-upload
 file-upload-image="fileAttachment"
 file-upload-loading=""
 file-upload-error="errors"
 file-upload-limit="1048576"
 file-upload-callback="attachFile()"
 class="field">

The code works as excepted but i can't seem to get rid of this error. Any help?

Solution

The links shown in AngularJS you can actually go to, in this case when you go to the error description page it'll say

Expression '' used with directive 'fileUpload' is non-assignable!

The directive is doing

scope.fileUploadLoading = false;

However, you've passed no scope variable to the file-upload-loading attribute:

file-upload-loading=""

Which means that it is assigning the value within the directive, then applying the changes, AngularJS spots the changes and performs the two way data binding only to find out it has nowhere to store the false value, because no variable was given on the attribute. Effectively, it's trying to assign false to nothing.

What you could do to rid of the error message is to either add some unused property:

file-upload-loading="iDontEvenUseThis"

And never even look at it, or possibly the directive may allow you to omit the attribute altogether, this depends on the directive implementation though.