加载img后，AngularJs Component不会更新视图

Question

我正在使用angularJs 1.7组件。

这是我上传图片然后将其转换为base 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））没有运气，我不知道在哪里放置它：

How to access the correct `this` inside a callback?

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 .

编辑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'对象。

所以在你的情况下，如果你不想使用$ scope，templateUrl只能在this对象上变量。您可以使用var club = {}声明它