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： 好的，我已经用

初始化了club。

$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对象上是变量，如果您不想使用$ scope。您可以使用var club = {}

进行声明

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

1 个答案: