5

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

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

我该如何解决？

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

文件指令.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);
        }
    };
});

（这实际上是从这里借来的。）

索引.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: '使用严格';

var spreadsheetApp = angular.module('spreadsheetApp',[]);

spreadsheetApp.config(function($routeProvider) {
    $routeProvider.
        when('/', {
        controller: 'spreadsheetController',
        templateUrl: 'views/innerHTML.html'
        });
});

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

4

3 回答 3

0

在我看来，您似乎没有定义该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。

于 2013-07-16T21:06:25.943 回答
0

您的示例中缺少的一件事是绑定到某些父范围属性：

<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

于 2013-12-07T22:35:46.650 回答
0

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

<div ng-app="spreadsheetApp" ng-init='fileOut=null'>
<file-reader file='fileOut'> </file-reader>
于 2013-07-23T16:11:33.253 回答