Компонент AngularJs не обновляет вид после загрузки img

Question

Я использую компоненты angularJs 1.7.

Это мой компонент, который загружает изображение, затем преобразует его в базу 64, затем оно должно отображаться, но отображение не работает.

myApp.component('club', {
  templateUrl: 'vues/club.html',
  controller: function($log,$scope) {

        // HTML form data, 2 way binding ..
        this.club = {};


        // Bse 64 encoder
        encodeImageFileAsURL = function() {

                var filesSelected = document.getElementById("inputFileToLoad").files;
                if (filesSelected.length > 0) {
                  var fileToLoad = filesSelected[0];

                  var fileReader = new FileReader();

                  fileReader.onload = function(fileLoadedEvent) {

                        var srcData = fileLoadedEvent.target.result; // <--- data: convert base64 : OK

                        this.club.img = srcData ; // Displaying in view doesnt work 
                }
                  fileReader.readAsDataURL(fileToLoad);
                }
              }


            // Jquery watcher when we upload a picture
            $(document).on('change', 'input[type="file"]' , function(){
                encodeImageFileAsURL();
            });

Это кнопка html внутри шаблона:

<div id="upload_button">
        <label>
            <input name="inputFileToLoad" id="inputFileToLoad" ng-model="logo"  type="file"  onchange=""  /> </input>
            <span class="btn btn-primary">Upload picture</span>
        </label>
  </div>

Это ошибка:

TypeError: this.club is undefined

srcData в порядке и содержит базовое изображение 64, функцияработает хорошо.

Я попробовал предоставленное решение (.bind (this)) там без удачи, я не знаю, где его разместить:

Как получить доступ к правильному`this` внутри обратного вызова?

When using the $scope syntax, it is working, adding $scope.$apply(), but now i'm using components based dev, and the .this syntax, it doesnt work any more .

EDIT 1: Хорошо, я инициализировал клуб с

$scope.club = {} ;

, затем внутри функции,Я пишу

$scope.club.img = srcData ;

Затем все работает нормально.Я не понимаю, почему .Это не то же самое, что $ scope!

Answer 1

См. Следующий пример, где this объект имеет ссылку на

a={
  firstname:"something",
  lastname:"something2",
  fullname:function(){
      console.log(this.firstname+' '+this.lastname);
  }
}

a.fullname();

В вышеприведенном примере создан объект a и внутри fullname() функция this объект, указывающий на 'a' объект.

Так, чтобы вваш случай templateUrl является переменной только для this Object, если вы не хотите использовать $ scope.Вы можете объявить это, используя var club = {}