AngularJS錯誤：不可分配的模型表達式

看到這個問題問了幾次，但我看不出如何將答案應用於我的問題。嘗試上傳文件時，我一直收到此錯誤。AngularJS錯誤：不可分配的模型表達式

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： '使用嚴格的';

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

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

而且innerHTML.html的內容只不過是： <file-reader> </file-reader>

來源

2013-07-16 user2494584

對我來說，它看起來像你還沒有定義的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-16 21:06:25

仍然有同樣的錯誤;沒有改變。 – user2494584

我剛添加了一個可以工作的jsfiddle。檢查出來並嘗試調整。 –

有完全相同的問題，看看這個更新的小提琴：http://jsfiddle.net/Kc8VJ/1/初始化文件屬性伎倆，但爲什麼這是必要的？

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

來源

2013-07-23 16:11:33 Ephraim

的一兩件事，那就是缺少在你的榜樣，是結合一些父作用域屬性：

<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-07 22:35:46 user3078523

AngularJS錯誤：不可分配的模型表達式

回答

相關問題