2013-10-29 3 views
5

इस कोड का उपयोग करना:AngularJS: इनपुट के लिए बाध्य एनजी मॉडल [type = फ़ाइल] को जन्म देती है 'अब प्रयोग करने योग्य' अपवाद

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

:

<!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> 

इस त्रुटि को बढ़ा देंगे जैसे ही आप type="file" से type="text" बदलते हैं, त्रुटि ठीक हो जाती है। किसी भी विचार को इस बारे में कैसे जाना है? मैं एक निर्देश लिखने जा रहा हूं जो इनपुट पर भी change को सुनेंगे, दी गई फ़ाइल अपलोड करें और बाध्य मॉडल के लिए इसका मान असाइन करें। लेकिन मैं यह त्रुटि मुझे ऐसा करने से रोकती है। पिछले कुछ दिनों में मुझे कुछ बाल खर्च हुए। इस मामले पर किसी भी इनपुट की सराहना की जाएगी।

+0

यकीन नहीं आप एक फ़ाइल इनपुट पूर्वप्रविष्टि द्वारा क्या करने की आशा की जांच कर सकता है। यह अच्छा क्या होगा? आपके पास मूल फ़ाइल ऑब्जेक्ट – charlietfl

+0

इनपुट नहीं भर रहा है, बस मॉडल को बाध्यकारी सेट करना है। हालांकि, मुझे यह स्वीकार करना होगा कि उसने मुझे एक रैपर तत्व बनाने और इसके लिए बाध्यकारी जोड़ने का विचार दिया है, इसके बजाय इनपुट स्वयं –

+1

अच्छी तरह से जब आप 'ng-model' सेट करते हैं और उस स्कोप प्रॉपर्टी के लिए पहले से ही एक मान है, तो आप अनिवार्य रूप से पॉप्युलेट कर रहे हैं इनपुट मान ... जो फ़ाइल इनपुट – charlietfl

उत्तर

2

एक भी इनपुट के लिए मैं बस

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

तब मैं अपने नियंत्रक समारोह में एक FileList तक पहुँच प्राप्त का उपयोग करें और एक FileReader उदा के लिए भेज

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

मैं एनजी-दोहराने के मामले के लिए इसे बढ़ाया है, तो आप इस plunker

संबंधित मुद्दे