AngularJS 错误 : Non-assignable model expression-6ren

AngularJS 错误 : Non-assignable model expression

转载作者：行者123 更新时间：2023-12-03 17:52:27

25

4

看到这个问题问了几次，但我看不出答案如何应用于我的问题。我在尝试上传文件时不断收到此错误。
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);
        }
    };
});

(这实际上是从 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:
'使用严格';

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

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

以及 的内容innerHTML.html 很简单: <file-reader> </file-reader>

最佳答案

在我看来，您似乎还没有定义 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的工作文件上传。

关于AngularJS 错误 : Non-assignable model expression，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17686524/

25

4

0

文章推荐： magento - 尝试导入网站时 OpenERP Magento 集成失败

文章推荐： solr - 使用 Solr 进行语音搜索，用于巴西葡萄牙语

c - 函数结构: "if error, early return" or "if error, assign, else, assign, return assigned value"?
在嵌入式系统的背景下，给出以下函数结构: 返回变量的条件赋值: int foo(int x) { int status; if (is_valid(x)) {
python - 如果条件不满足，则单独对数据进行分组，Cnd :true assign grp 1; cnd false :assign group 2;cnd true: assign group 3
#input |--IDs-|--Value-| |--da1-|--100---| |--da2-|---80---| |--da3-|--200---| |--da4-|--300---| |--
variable-assignment - 变量的声明和赋值 : silently dropping of assigned values
您可以declare a list of variables and assign them some value在 Perl 6 my ($a, $b) = 33,44 # $a will be 3
javascript - Object.assign() 和 '= assign' 实现数组或对象的浅拷贝有什么区别？
在下面的代码中实现对象的浅拷贝，但是不同的输出让我很困惑: 对象.分配: var obj = { name: 'wsscat', age: 0, add: { a: 'beijin
javascript - Object.assign {} 和 Object.Assign [] 有区别吗
我正在查看一位已不复存在的开发人员的一些旧代码，并注意到有时他使用 Object.assign({}, xyz) 还有他用过的其他东西 Object.assign([], abc); 两者有区别吗？
javascript - 为什么是 Object.assign() 而不是 this.assign() (对于对象)？
这个问题在这里已经有了答案: Why were ES5 Object methods not added to Object.prototype? (2 个答案) 关闭 4 个月前。我正在做一个
javascript - Object.assign 和 just assign 的区别
我想知道这之间的区别: Object.assign(otherObject, { someNewProperty: '' }); 和 otherObject.someNewProperty = '
javascript - @typescript-eslint/no-unsafe-assignment : Unsafe assignment of an any value
考虑以下代码: const defaultState = () => { return { profile: { id: '', displayName: '',
javascript - JS/TS 语法 : Destructuring assignment with inner assignment
我刚刚偶然发现this line of TS code : const { title = item.text } = item; 这似乎是一个destructuring assigment但是大括号
javascript - CoffeeScript/JavaScript : why assign a letter to a variable that has a number assigned?
我是一个没有经验的 JavaScript 用户，正在阅读这本书 CoffeeScript: Accelerated JavaScript Development ，其中作者制作了一种 Scrabble
SAS "successfully assigned from logical server"与 "successfully assigned as follows"
当我查看日志文件时 D:\SAS\XXX\Lev1\SASMain\BatchServer\Logs 我看到了这两行 NOTE: Libref TESTLIB successfully assigne
c++ - 使用哪个 : move assignment operator vs copy assignment operator
我似乎不明白为什么要使用移动赋值运算符: CLASSA & operator=(CLASSA && other); //move assignment operator 结束了，复制赋值运算符: CL
class - 无法解决 Eiffel 中的错误 “target of assigner call has no associated assigner command”
在Eiffel Studio中，我一直试图访问从另一个类定义的一个类的对象的字段。但是，它不断给出我无法理解和解决的错误。以下是示例代码片段: 创建对象的类: class TEST1 feat
javascript - 引用错误 : Invalid left-hand side in assignment when really assigning a value
为什么这个片段在 Node (10.5) .then(function() { this = {...this, ...payload}; this.update();
javascript - 如何使用 ESlint : Disallow Assignment in return Statement (no-return-assign)? 解决警告
我在我的 React 应用程序中使用以下包来生成 Recaptcha 组件:https://github.com/appleboy/react-recaptcha 组件如下所示，带有 eslint 警
C++ move 语义 : why copy assignment operator=(&) is called instead of move assignment operator=(&&)?
我有以下代码: #include #include using std::cout; struct SomeType { SomeType() {} SomeType(const Some
javascript - 语法错误: Invalid destructuring assignment target or ReferenceError: invalid assignment left-hand side?
我有这个代码示例: var a = 10; ({a}) = 0; 在 Google Chrome 中，它显示错误:SyntaxError:无效的解构赋值目标在 Firefox 中，它显示错误:Ref
javascript - Uncaught ReferenceError : Invalid left-hand side in assignment when trying to assign a sum to value
我有一个函数，用于对两个输入字段的输入求和并将其分配给一个。我的函数如下所示: function sum(id) { nextId = id+2 console.log
objective-c - 自动引用计数问题 : Assigning retained object to unsafe_unretained variable; object will be released after assignment
我收到这个警告 "Automatic Reference Counting Issue: Assigning retained object to unsafe_unretained variable
ruby - Shopify Liquid 语法 - {%- assign [some_var] = [some_val] -%} 和 {% assign [some_var] = [some_val] %} 有什么区别
在使用 Shopify 的 Liquid 语言编码时，我注意到使用以下语法分配了一些变量: {%- assign variable = value -%} 和使用以下语法分配的其他变量: {% ass

首页

博学

6Ren·AI

商城

AngularJS 错误 : Non-assignable model expression