[英]Handle callback functions in Angular 1.5 component
我在Angular应用程序中处理回调时遇到问题。
我正在尝试加载图像并将其读取到filesSelect.onchange;
可以正常工作,但是我需要在我的filesSelect.onchange;
之外访问它filesSelect.onchange;
函数以将其解析到我的数据库。
我想设置要保存的e.currentTarget.result,并将其保存为我的范围: this.imageVariable
。
我有以下组件:
(function(){
angular
.module('app')
.component('addImage', {
bindings: {
fileread: '='
},
controller: function(getfirebase, $base64){
//variables
this.base64Image = [];
this.imageVariable;
var imageElement = [];
// functions
this.userInfo = getfirebase;
this.update_settings = update_settings;
// this.filesChanged = filesChanged;
function update_settings(){
this.userInfo.$save();
};
this.data = {}; //init variable
this.click = function() { //default function, to be override if browser supports input type='file'
this.data.alert = "Your browser doesn't support HTML5 input type='File'"
}
var fileSelect = document.createElement('input'); //input it's not displayed in html, I want to trigger it form other elements
fileSelect.type = 'file';
if (fileSelect.disabled) { //check if browser support input type='file' and stop execution of controller
return;
}
this.click = function() { //activate function to begin input file on click
fileSelect.click();
}
fileSelect.onchange = function() { //set callback to action after choosing file
var f = fileSelect.files[0], r = new FileReader();
console.log(f);
r.onloadend = function(e) { //callback after files finish loading
e.currentTarget.result;
}
r.readAsDataURL(f); //once defined all callbacks, begin reading the file
};
},
controllerAs: 'addImage',
template: `
<h3>Settings-pages</h3>
<card-list class="agform">
<ul>
<li>
<p>Image preview</p>
</li>
<li>
<img ng-src="{{addImage.userInfo.image}}">
</li>
<li>
<input type="text" ng-model="addImage.userInfo.name" name="fname" placheholder="Name"><br>
<input type="text" ng-model="addImage.userInfo.email" name="fname" placheholder="Email"><br>
</li>
</ul>
{{addImage.userInfo}}
</card-list>
<card-footer>
<button ng-click='addImage.click()'>click to select and get base64</button>
{{addImage.imageVariable}}
<button ng-click='addImage.update_settings()'></button>
</card-footer>
`
})
})();
这可能很简单,但是我花了数小时试图理解和解决这个问题。
我不能说我知道,从一个javascript角度angularjs ...,这将会是节能效果比简单的this
另一个变量( me
似乎是一个普遍的选择),然后使用me.imageVariable = e.currentTarget.result;
controller: function(getfirebase, $base64){
//variables
this.base64Image = [];
this.imageVariable;
var imageElement = [];
// ************** added line
var me = this;
// ... code removed for clarity
fileSelect.onchange = function() { //set callback to action after choosing file
var f = fileSelect.files[0], r = new FileReader();
console.log(f);
r.onloadend = function(e) { //callback after files finish loading
// ******* save to imageVariable here
me.imageVariable = e.currentTarget.result;
}
r.readAsDataURL(f); //once defined all callbacks, begin reading the file
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.