Uncaught TypeError : 정의되지 않은 (...)의 속성 'file'을 읽을 수 없습니다.

Question

저장 버튼을 클릭하면 내 HTML에서 이미지를 업로드하려고하는데 컨트롤러에서 업로드 기능을 호출하고 있습니다. 컨트롤러에 업로드 기능을 입력하면 $ scope.file.name을 확인하기 위해 $ scope에 액세스 할 수 없습니다.

이

//upload image.html  
<div class="horizontal"> 
<table border=1 frame=void rules=rows class="ui celled table" > 
<thead style="text-align: center;"> 
    <tr> 
    <th> Id </th> 
    <th> Question </th> 
    <th> Option A </th> 
    <th> Option B </th> 
    <th> Option C </th> 
    <th> Option D </th> 
    <th> Answer </th> 
    <th> Section id </th> 
    <th> Image </th> 
    <th> Edit</th> 
    </tr></thead> 
    <tbody ng-repeat="ques in questionObj | filter: searchText" style="text-align: center;"> 
    <tr> 
     <td>{{$index + 1}}</td> 
     <td><span ng-show="editEnabled" ng-model="Title"> 
     {{ ques.Title || 'empty' }} 
     </span> 
     <div ng-hide="editEnabled"> 
     <textarea ng-model="ques.Title"></textarea> 
     </div> 
    </td> 
    <td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_a || 'empty'}} </span> 
     <div ng-hide="editEnabled" class="option"> 
     <textarea ng-model="ques.Option_a"></textarea> 
     </div> 
    </td> 
    <td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_b || 'empty'}} </span> 
     <div ng-hide="editEnabled" class="option"> 
     <textarea ng-model="ques.Option_b"></textarea> 
     </div> 
    </td> 
    <td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_c || 'empty'}} </span> 
     <div ng-hide="editEnabled" class="option"> 
     <textarea ng-model="ques.Option_c"></textarea> 
     </div> 
    </td> 
    <td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_d || 'empty'}} </span> 
     <div ng-hide="editEnabled" class="option"> 
     <textarea ng-model="ques.Option_d"></textarea> 
     </div> 
    </td> 
    <td><span ng-show="editEnabled" ng-model="Title">{{ques.Answer || 'empty'}} </span> 
     <div ng-hide="editEnabled" class="option"> 
     <textarea ng-model="ques.Answer"></textarea> 
     </div> 
    </td> 
    <td><span ng-show="editEnabled" ng-model="Title">{{ques.Section_id || 'empty'}} </span> 
     <div ng-hide="editEnabled" class="option"> 
     <input type="text" ng-model="ques.Section_id"></input> 
     </div> 
    </td> 
    <td> 
     <span ng-if="ques.Image != 'nil'" ng-show="editEnabled" ng-model="Title"> <img ng-src="{{ques.Image}}" class="image-container" /></span> 
     <span ng-if="ques.Image === 'nil'" ng-show="editEnabled" ng-model="Title">No Image</span> 

     <div ng-if="ques.Image != 'nil'" ng-hide="editEnabled" class="option"> 
     <img ng-src="{{ques.Image}} " class="image-container" /> 
     </div> 

     <div ng-if="ques.Image === 'nil'" ng-hide="editEnabled" class="option"> 
     <input class="bottom-marg-15" type="file" name="file" file onchange="angular.element(this).scope().imageLoad(this)"></input> 
     <!-- Progress Bar --> 
     <div class="progress"> 
      <div class="progress-bar" role="progressbar" aria-valuenow="{{ uploadProgress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ uploadProgress }}%;"> 
      {{ uploadProgress == 0 ? '' : uploadProgress + '%' }} 
      </div> 
     </div> 
     <div ng-repeat="step in stepsModel"> 
     <img class="small-thumb" ng-src="{{step}}" /> 
     </div> 
     </div> 
    </td> 

    <td style="white-space: nowrap"> 
     <div class="buttons" ng-show="editEnabled" ng-show="editEnabled"> 
     <button class="btn btn-primary" ng-click="editEnabled = !editEnabled">edit</button> 
     <button class="btn btn-danger" ng-click="question.removeUser($index,ques.Id)">del</button> 
     </div> 
     <div ng-hide="editEnabled" class="form-buttons form-inline"> 
     <button ng-model="Title" ng-disabled="editQuestionForm.$waiting" ng-click=" upload(); editEnabled = !editEnabled" class="btn btn-primary"> 
      save 
     </button> 
     <button type="button" ng-click="editEnabled = !editEnabled" class="btn btn-default"> 
      cancel 
     </button> 
     </div> 
    </td> 
    </tr> 
</tbody> 

업로드 기능을 갖는 제어기이다. 업로드 기능에서 $ scope에 액세스 할 수 없습니다.

'use strict'; 
angular.module('onlineTestAngularApp') 
.controller('editQuestionCtrl', function($scope, GetQuestionsService, $window, $location, localStorageService, ENV) { 
var vm = this; 
vm.success = false; 
vm.auth_token = localStorageService.get('rec-auth-token'); 
vm.role = localStorageService.get('role'); 
$scope.editEnabled = true; 
$scope.access_key = ENV.access_key; 
$scope.secret_key = ENV.secret_key; 
$scope.bucket = "q-auth/angular_test/"; 

$scope.stepsModel = []; 

$scope.imageLoad = function(element){ 
var reader = new FileReader(); 
reader.onload = $scope.imageIsLoaded; 
reader.readAsDataURL(element.files[0]); 
} 

$scope.imageIsLoaded = function(e){ 
$scope.$apply(function() { 
    $scope.stepsModel.push(e.target.result); 
}); 
} 

$scope.upload = function($scope){ 
console.log("inside upload"); 
} 
}); 

Answer 1

컨트롤러 기능을 입력하면 $scope에 액세스 할 수 있습니다.

컨트롤러 당신이 컨트롤러의 범위를 액세스하기위한 두 가지 기술 믹스 보인다

$scope.upload = function() { 
console.log($scope.stepsModel) // or any other property 
} 

: vm 및 $scope을 매개 변수로 전달 할 필요가 없습니다. 내 조언은 vm 컨트롤러 변수를보기에 노출에만 사용하는 것입니다. $scope을 사용하면 곧 비추천 될 예정이며 주로보기에서 변경 사항을 $watch에 사용합니다.

Answer 2

업로드()에 $ scope이라는 매개 변수가 있으면 제거하십시오.

변경 :

$scope.upload = function($scope){ 
console.log("inside upload"); 
} 

사람 : 당신은() 함수 업로드를 호출 할 때 인수를 전달할 것으로 예상 것이기 때문에

$scope.upload = function(){ 
console.log("inside upload"); 
}; 

이 함수에서 $ 범위가 로컬 변수로한다 그 함수는 정의되지 않게된다.