未捕獲TypeError：無法讀取屬性'文件'的undefined（...）

Question

我想從我的HTML上傳一個圖像，點擊保存按鈕，我打電話給控制器的上傳功能。當我在控制器中輸入上傳函數時，我無法訪問$ scope來檢查$ scope.file.name。

//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"); 
}; 

因爲當你調用函數上傳（），它會希望傳遞參數，在函數$範圍作爲的局部變量該功能，因此變得不明確。