繁体   English   中英

在Angular 1.5组件中处理回调函数

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM