Wait for AngularJS Service to finish running (chrome console)-CodePudding

I'm manipulating some angular services/functions via Chrome console. (I have to specifically do this for a task I'm working on).

What I want to do is wait for the AddBagIfLimitNotReached() function to execute and finish running. And only then access the variable this.option.Quantity.

angular.element(document.querySelector(".quantity-button")).controller()._registeredControls[1].Scope.AddBagIfLimitNotReached = async function(n) {
    console.log("tthis", this)
        if (this.HasReachedMaximumBaggageAllowance()) {
            angular.element(document.querySelector(".quantity-button")).controller()._registeredControls[1].LuggageDrawersService.OpenLuggageLimitReachedDrawer();
            return;
        }
        this.AddBag(n);
        console.log("Quantity", this.option.Quantity);
};

With this function, I'm adding a product to my basket. And this.option.Quantity should console.log 1. But it actually consoles.log 0.

However, if I check the object itself, it shows 1.

So I think what is happening, is I'm console.logging my bag quantity, before the bag has actually finished being added to the basket.

For example, if I added a settimeout of 2 seconds, the correct bag value = 1 is console.logged.

angular.element(document.querySelector(".quantity-button")).controller()._registeredControls[1].Scope.AddBagIfLimitNotReached = async function(n) {
    console.log("tthis", this)
        if (this.HasReachedMaximumBaggageAllowance()) {
            angular.element(document.querySelector(".quantity-button")).controller()._registeredControls[1].LuggageDrawersService.OpenLuggageLimitReachedDrawer();
            return;
        }
        this.AddBag(n);

        // Returns 1
        setTimeout(function(){ console.log("Quantity", this.option.Quantity); }, 2000);
};

Is there a better way I can achieve this, without using settimeout? I have tried async/await/promises, but I still can't seem to find a way to wait for the function to finish loading.

Async/await returns an error - it doesn't like the function this.HasReachedMaximumBaggageAllowance() and throws an error stating this.HasReachedMaximumBaggageAllowance is not a function.

Any tips/ideas would be much appreciated.

CodePudding user response：

I found a solution, I'm using $watch, to watch a key/value, in the this object. And this seems to work:

angular.element(document.querySelector(".quantity-button.plus-button")).controller()._registeredControls[1].Scope.AddBagIfLimitNotReached = function(n) {
    let bagCount = this.option.Quantity;
    console.log("bagCount", bagCount);

        if (this.HasReachedMaximumBaggageAllowance()) {
            angular.element(document.querySelector(".quantity-button.plus-button")).controller()._registeredControls[1].LuggageDrawersService.OpenLuggageLimitReachedDrawer();
            return;
        };

        this.AddBag(n);
        this.$watch("this.option.Quantity", function (newValue) {
            console.log(`Value of foo changed ${newValue}`);
            if (newValue > 0) {
                document.querySelector(`.luggage-tile-weight-${n.Weight} .tile-title .tick-box`).classList.add("green-tick");
                displayGreenTickNoBagSelected();
            };
            if (newValue === 0) {
                document.querySelector(`.luggage-tile-weight-${n.Weight} .tile-title .tick-box`).classList.remove("green-tick");
                displayGreenTickNoBagSelected();
            };
        });
};