javascript - 处理 Angular 1.5 组件中的回调函数

Question

我在 Angular 应用程序中处理回调时遇到问题。

我正在尝试加载图像并将其读取为 base64 - 这工作正常，但我需要在 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>
            `
    })
})();

这可能很简单，但我花了几个小时试图理解和解决这个问题。

Answer 1

我不能说我了解 angularjs ...从 javascript 的 Angular 来看，它就像将 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
    };