5

この質問が数回尋ねられたのを見ましたが、答えが私の問題にどのように適用されるかわかりませんでした。ファイルをアップロードしようとすると、このエラーが発生し続けます。

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

（実はこちらからお借りしました。）

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>

4

3 に答える 3

0

あなたの例に欠けていることの1つは、いくつかの親スコーププロパティへのバインディングです:

<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 に答える
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 に答える