Компонент AngularJs не обновляет представление после загрузки img
я использую компоненты 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 в порядке и содержит изображение base 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 .
РЕДАКТИРОВАТЬ 1: Хорошо, я инициализировал клуб с помощью
$scope.club = {} ;
затем внутри функции я пишу
$scope.club.img = srcData ;
Тогда работает нормально. Я не понимаю, почему .this не то же самое, что $scope!
Ответы 1
См. следующий пример, где объект this имеет ссылку на
a = {
firstname:"something",
lastname:"something2",
fullname:function(){
console.info(this.firstname+' '+this.lastname);
}
}
a.fullname();В приведенном выше примере создается объект a и внутри fullname() функция this объект, указывающий на объект 'a'.
Так что в вашем случае
templateUrl является переменной только для this объекта, если вы не хотите использовать $scope. Вы можете заявить об этом, используя var club = {}