Question

看了几次问这个问题，但我看不出答案如何应用于我的问题。尝试上传文件时，我一直收到此错误。

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

我该如何解决？

我已经包含了所有相互交互的文件，即使我很确定fileDirective.js中发生了错误

fileDirective.js。包含此指令：

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);
        }
    };
});

（这实际上是从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'
        });
});

innerHTML.html 的内容很简单： <file-reader> </file-reader>

Answer 1

对我而言，您似乎没有定义fileReader指令属于正确的模块。

尝试添加此第一行：

    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) {
...

或者更好：

 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工作文件上传。

Answer 2

有完全相同的问题，请看看这个更新的小提琴：http://jsfiddle.net/Kc8VJ/1/初始化文件属性可以解决问题，但为什么这有必要呢？

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

Answer 3

您的示例中缺少的一件事是绑定到某个父作用域属性：

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

发生了什么：

file属性定义为'='。在这种情况下，AngularJS尝试在此属性与某些父作用域属性之间建立双向绑定，该属性是通过file属性定义的名称。
要定义父作用域属性，只需添加file属性即可。该属性不必初始化（不需要ng-init）也不必显式声明。 AngularJS将为您创建它。
在您的情况下，缺少file属性，因此未正确设置绑定。因此，第一次尝试将值分配给本地属性时，您将收到“不可分配”错误。它发生在以下行中：
```
scope.file = element.files[0]; 
```

您可以在此处找到有关此主题的更多信息：http://docs.angularjs.org/api/ng.$compile

AngularJS错误：不可分配的模型表达式

3 个答案: