为什么在角度组件中无法访问范围变量

Question

我写了一个angular指令来读取文件输入数据。但是，当我单击更新按钮时，无法访问更新的范围变量。为什么我无法访问在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

完美，$ scope不存在于组件中。需要使用关键字isInstanceOf(Object);