元の 'this'参照を保持したまま、ディレクティブ属性を使って関数を渡す方法

Question

ファイルのアップロード用のディレクティブをAngularで作成しました。成功コンポーネントのコールバックを親コンポーネントからディレクティブに渡したいと思いますが、途中で失われてしまう関数内にはthisが参照されています。

この場合、.bind(this)はどうすればよいですか？

親コンポーネントテンプレート：

<input 
    type="file" 
    name="xml-file" 
    class="hidden" 
    id="xml-file-input" 
    accept="text/xml" 
    file-upload 
    file-upload-accept="text/xml" 
    file-upload-then="$ctrl.fileUploadOnSuccess" 
    file-upload-url="/versementPublique/{{ $ctrl.noDemande }}/dossiers"> 

ファイルアップロードディレクティブ：

function FileUploadDirective(dialogBoxService, glossaryFilter, $parse, fileUploadService) { 
    return { 
    restrict: 'A', 
    link(scope, elem, attrs) { 
     const name = attrs.name; 
     const url = attrs.fileUploadUrl; 
     const type = attrs.fileUploadAccept; 
     const successCallback = $parse(attrs.fileUploadThen)(scope); 

     elem.on('change.upload', validate); 

     function validate($event) { 
     const errors = validateFile($event.target.files[0]); 
     const isValid = errors.length === 0; 

     if (!isValid) { 
      dialogBoxService.open({ 
      title: glossaryFilter('erreur'), 
      message: ` 
       Please correct the following: 
       <ul class="list list--bullet"> 
       ${errors.map(err => `<li>${err}</li>`)} 
       </ul> 
      `, 
      }); 
      scope.$apply(); 
      resetFileInput(); 
     } else { 
      const file = $event.target.files[0]; 
      const fd = new FormData(); 

      fd.append(name, file); 

      this.coreService.http({ 
      method: 'POST', 
      url: url, 
      data: fd, 
      transformRequest: angular.identity, 
      headers: { 
       'Content-Type': undefined, 
      }, 
      }) 
      .then(then, catcher, notify); 
     } 
     } 

     ... 

     function then(response) { 
     resetFileInput(); 
     successCallback(); 
     } 

     function catcher(err) { 
     console.error(err); 
     resetFileInput(); 
     } 

     function notify(event) { 
     console.log(event); 
     } 

     function resetFileInput() { 
     elem 
      .off('change.upload') 
      .val('') 
      .on('change.upload', fileUploadService.uploadFile); 
     } 
    }, 
    }; 
} 

属性に渡された関数：

class ParentComponent { 
    constructor($rootScope) { 
    this.$rootScope = $rootScope; 
    } 

    // Because there is a `this` in here, when it is called in the 
    // directive, it is lost. There is no way to .bind() in the 
    // template, so I'm lost as how to keep the right `this`. 
    fileUploadOnSuccess() { 
    this.$rootScope.$broadcast('updateDossier'); 
    } 
} 

ParentComponent.$inject = ['$rootScope']; 

コンソールで0

エラー：

thisは常に（あなたがそれを.bind()ない限り）関数が呼び出された1つであるため、それが定義されているクラスのプロパティ$rootScopeを見つけることができません。

テンプレートにthisというバインディングを試みましたが、機能しません。

どうすればいいですか？

gouvernementales.js:5328 Uncaught TypeError: Cannot read property '$rootScope' of undefined 

Answer 1

[OK]を、ので、これは私が私のthis問題解決することができた方法です：私は続けることができた、この「ローカル」にバインドされた関数を返す関数を呼び出すことによって

をかつては指令の中で一度参照してください。

属性を通じてディレクティブに渡される成功コールバック：

fileUploadOnSuccess() { 
    return function success() { 
     this.$rootScope.$broadcast('updateDossier'); 
    }.bind(this); 
    } 

テンプレート：

<input 
    type="file" 
    name="fileDossiers" 
    class="hidden" 
    id="xml-file-input" 
    accept="text/xml" 
    file-upload 
    file-upload-accept="text/xml" 
    file-upload-then="$ctrl.fileUploadOnSuccess()" 
    file-upload-url="/versementPublique/dossiers">