2013-10-29 4 views
5

Stosując ten kod:angularjs: wiązanie ng model do wejścia [type = file] podnosi 'nie nadający się do użytku' wyjątek

<!doctype html> 
<html lang="en" ng-app="app"> 
<head> 
    <meta charset="UTF-8"> 
    <title>ngTest</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script> 
    <script> 
     angular 
      .module('app', []) 
      .controller('Main', ['$scope', function($s) { 
       $s.data = { 
        level1: { 
         level2: { 
          elements: [{ 
           name: 'item1' 
          },{ 
           name: 'item2' 
          },{ 
           name: 'item3' 
          },{ 
           name: 'item4' 
          }] 
         } 
        } 
       }; 
      }]); 
    </script> 
</head> 
<body ng-controller="Main"> 
    <div ng-repeat="item in data.level1.level2.elements"> 
     <input type="file" ng-model="item.name"> 
    </div> 
    <pre>{{data}}</pre> 
</body> 

podniesie ten błąd:

Error: An attempt was made to use an object that is not, or is no longer, usable. 

Błąd zniknie, gdy tylko zmienisz type="file" na . Masz pomysł, jak sobie z tym poradzić? Zamierzam napisać dyrektywę, która będzie słuchać change nawet na wejściu, przesłać podany plik i przypisać jego wartość do powiązanego modelu. Ale ten błąd uniemożliwia mi to. Ostatnie kilka dni kosztowało mnie sporo włosów. Wszelkie uwagi w tej sprawie byłyby mile widziane.

+0

nie wiesz, co można oczekiwać, aby zrobić pre-wypełniania wejście pliku. Co by to dobrze zrobiło? Nie masz oryginalnego obiektu pliku – charlietfl

+0

, nie wypełniającego wstępnie wejścia, tylko ustawiając powiązanie z modelem. Muszę jednak przyznać, że dało mi to pomysł, aby utworzyć element opakowania i dodać do niego wiązanie, a zamiast niego samo wejście –

+1

dobrze, gdy ustawisz 'ng-model' i już posiadasz wartość dla tej właściwości zakresu, w zasadzie zapełnisz wartość wejściowa ... która nie działa przy wprowadzaniu pliku – charlietfl

Odpowiedz

2

Dla jednego wejścia po prostu użyć

<input ng-model="file" onchange="angular.element(this).scope().upload(this)" type="file"> 

następnie uzyskać dostęp do listy plików w mojej funkcji kontrolerów i wysłać go do FileReader przykład

$scope.upload = function(el) { 
    console.log(el.files); 
}; 

Wyciągnąłem go do przypadku NG-powtórzenia, więc można sprawdzić ten plunker