$rootScope:inprog$apply已在进行中。更改事件错误

Question

在我的项目中，我试图上传一个图像，将其作为数据URL读取，并将其存储到我的数据库中。

我的超文本标记语言ng-Click的调用这些方法与true或false作为参数（一个做身体图像和其他一个配置文件图像）

根据调用true还是false，它会更改事件的id。

出于某种原因，当它的“真”时，一切都运行得非常好。用户可以选择图像，将其正确发送到数据库，并正确加载图像。

然而，当调用“false”时，我得到了错误：

[$rootScope:inprog]$apply已在进行中

然后console.log（）测试2222没有被调用。

Html

<img src="{{controller.myCause.causeImage}}" ng-click="controller.uploadImage('true')" alt="Your Image Here" class="cause-img" id="profileImage" style="width: 80%; height: 35%;" height="300" />
<input id="imageUpload" type='file'>

<img src="{{controller.myCause.causeThumbnailImage}}" ng-click="controller.uploadImage('false')" alt="Your Thumbnail Here" id="profileImageThumb" class="cause-img" style="width: 80%; height: 20%;" height="200" />
<input id="profileImageUpload" type='file'>

客户端

/////////////////////////////////////
//Begin Uploading Cause Profile Image
public uploadImage(bool) {
    if (bool === "true") {
        $("#imageUpload").click();
        this.imgUpload(bool);
    } else {
        $("#profileImageThumb").click();
        this.imgUpload(bool);
    }
}

public imgUpload(bool) {
    console.log(bool);
    var _this = this;
    var id = "";
    var imgId = "";

    if (bool === "true") {
        id = "#imageUpload";
        imgId = "#profileImage";
    } else {
        id = "#profileImageUpload";
        imgId = "#profileImageThumb";
    }

    console.log("111");

    $(id).change(function () {
        console.log("2222");
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.readAsDataURL(this.files[0]);
            $(imgId).attr('src', this.files[0]);
            _this.convertFileToBase64AndSet(this.files, bool);
        }  
    });

};

convertFileToBase64AndSet(fileList: FileList, bool) {
    var self = this;
    if (fileList.length > 0) {
        var reader = new FileReader();

        reader.onloadend = (e: Event) => {
            self.postProfileImage(reader.result, bool);
        }
        reader.readAsDataURL(fileList[0]);
    }
}

public postProfileImage(file, bool) {

    if (bool === "true") {
        this.$http.put(`api/causes/profpic`, JSON.stringify(file)).then((res) => {
            this.$state.reload();
        });
    } else {
        this.$http.put(`api/causes/thumbpic`, JSON.stringify(file)).then((res) => {
            this.$state.reload();
        });
    }
}
//End Cause Profile Image Upload
////////////////////////////////

Answer 1

类似于哈桑的回答，我得到了这个答案。

public uploadImage(bool) {
    var self = this;
    var id = "";
    if (bool === "true") {
        id = "#imageUpload";
    } else {
        id = "#profileImageUpload";
    }
    setTimeout( () => {
        $(id).click();
        self.imgUpload(bool);
    });
}

谢谢哈桑为我指明了正确的方向。setTimeout确实有效！

Answer 2

您的单击事件正在运行与当前摘要周期冲突的摘要周期。

您可以使用setTimeout（）

你能试试这个吗

public uploadImage(bool) {
    if (bool === "true") {
        setTimeout(function({$("#imageUpload").click();})            
        this.imgUpload(bool);
    } else {            
        setTimeout(function({$("#profileImageThumb").click();})
        this.imgUpload(bool);
    }
}