为什么范围变量不能在角度组件中访问

Question

我已经写了一个角度指令来读取文件输入数据。然而，当我点击更新按钮时，更新的范围变量不可访问。为什么我无法访问在ngFileSelect指令中更新的文件变量？

JS

// Define the `changeWord` module 
angular.module('changeWord', []); 
/// <reference path="changeWord.component.js" /> 
angular. 
    module('changeWord'). 
    component('changeWord', { 
     templateUrl: 'change-word/change-word.template.html', 
     controller: function ChangeWordController($scope, dictionaryService) { 
      var self = this; 
      //$rootScope.loggedIn = $cookies.get('loggedIn'); 
      self.formShowing = false; 
      $scope.search = function() { 
       dictionaryService.getWordsStartWith(self.searchText, function (r) { 
        self.searchResults = r; 
       }); 
      }; 

      $scope.change = function (id) { 
       dictionaryService.getWord(id, result => { 
        self.key = id; 
        self.word = result.word; 
        self.wordInEnglish = result.wordInEnglish; 
        self.pronunciation = result.pronunciation; 
        var syns =''; 
        angular.forEach(result.synonyms, a =>{ 
         syns += (syns == '') ? a.wordInEnglish : ', ' + a.wordInEnglish; 
        }) 
        self.synonyms = syns; 
        syns = ''; 
        angular.forEach(result.antonyms, a => { 
         syns += (syns == '') ? a.wordInEnglish : ', ' + a.wordInEnglish; 
        }) 
        self.antonyms = syns; 
       }); 
      } 

      $scope.clear = function() { 
       angular.element(document.querySelector('#pFile')).val(null); 
       self.word = ''; 
       self.wordInEnglish = ''; 
       self.pronunciation = ''; 
       self.synonyms = ''; 
       self.antonyms = ''; 
      }; 

      $scope.update = function() { 
       dictionaryService.deleteWord(self.key); 
       // unable to access the scope here 
       dictionaryService.addNewWord(self.word, self.wordInEnglish, self.pronunciation, $scope.file, self.synonyms, self.antonyms); 
       this.clear(); 
       self.formShowing = false; 
      } 
     } 
    }).directive("ngFileSelect", function() { 

     return { 
      link: function ($scope, el) { 
       el.bind("change", function (e) { 
        $scope.file = (e.srcElement || e.target).files[0]; 
        //$scope.update(); 
       }) 
      } 
     } 
    }); 

HTML

<div ng-cloak> 
    <form name="changeForm" button-form ng-submit="update()" ng-if="$ctrl.formShowing"> 
     <md-card flex flex-gt-md="70"> 
      <md-card-header> 
       <md-card-avatar> 
        <md-icon class="md-avatar-icon">edit</md-icon> 
       </md-card-avatar> 
       <md-card-header-text> 
        <span class="md-title">Change Existing Word</span> 
        <span class="md-subhead">in kannada dictionary</span> 
       </md-card-header-text> 
      </md-card-header> 
      <md-card-content> 
       <md-input-container class="md-block"> 
        <input name="word" ng-model="$ctrl.word" placeholder="Word in Kannada" required /> 
        <div ng-messages="changeForm.word.$error" ng-show="changeForm.word.$dirty" role="alert"> 
         <div ng-message="required">This is required!</div> 
        </div> 
       </md-input-container> 
       <md-input-container class="md-block"> 
        <input name="wordInEnglish" ng-model="$ctrl.wordInEnglish" placeholder="Word in English" disabled /> 
        <div ng-messages="changeForm.wordInEnglish.$error" ng-show="changeForm.wordInEnglish.$dirty" role="alert"> 
         <div ng-message="required">This is required!</div> 
        </div> 
       </md-input-container> 
       <p flex layout="row"> 
        <md-input-container class="md-block" flex="50"> 
         <input ng-model="$ctrl.pronunciation" placeholder="Pronunciation" /> 
        </md-input-container> 
        <md-input-container class="md-block" flex="50"> 
         <input id="pFile" type="file" ng-File-Select accept="audio/*" capture aria-label="Pronunciation Audio"> 
        </md-input-container> 
       </p>  
       <md-input-container class="md-block"> 
        <textarea ng-model="$ctrl.synonyms" placeholder="Synonyms"></textarea> 
       </md-input-container> 
       <md-input-container class="md-block"> 
        <textarea ng-model="$ctrl.antonyms" placeholder="Antonyms"></textarea> 
       </md-input-container> 

      </md-card-content> 
      <md-card-actions> 
       <md-button class="md-raised md-primary" type="submit">Save</md-button> 
       <md-button class="md-accent" ng-click="$ctrl.formShowing = !$ctrl.formShowing">Cancel</md-button> 
      </md-card-actions> 
     </md-card> 
    </form> 
    <md-content class="md-padding"> 
     <form name="searchForm" button-form ng-submit="search()"> 
      <md-input-container md-no-float class="md-block"> 
       <input name="searchText" ng-model="$ctrl.searchText" type="text" placeholder="Search"> 
       <md-icon style="display:inline-block;" type="submit">search</md-icon> 
       <div class="hint" ng-show="searchForm.searchText.$dirty">Press Enter to search</div> 
      </md-input-container> 
     </form> 
     <md-list flex> 
      <md-list-item class="md-2-line" ng-repeat="result in $ctrl.searchResults" ng-click="null"> 
       <div class="md-list-item-text" layout="column"> 
        <h3>{{ result.wordInEnglish }}</h3> 
        <p>{{ result.word }}</p> 
        <md-button name="ch" class="md-raised md-primary md-secondary" ng-click="$ctrl.formShowing=!$ctrl.formShowing; change(result.$id);">Change</md-button> 
       </div> 
      </md-list-item> 
     </md-list> 

    </md-content> 
</div> 

Answer 1

完美，$范围在现有的组件。需要使用关键字this