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

您的upload（）有一个名为$ scope的参数，将其删除。

变化：

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

要：

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

因为当你调用函数upload（）时它会传递一个参数，函数中的$ scope被当作该函数的局部变量，因此变得未定义。

未捕获的TypeError：无法读取未定义的属性“文件”（...）

2 个答案: