Giorgi Nakeuri
Giorgi Nakeuri

Reputation: 35780

Angular binding to async result

I have tried various ways but nothing works for me. What I have:

app.controller('someCtrl',
...

$scope.load = function () {
    client.loadAgreements().
        then(function (response) {
            $scope.unapprovedCount = response.data[StatusTypeEnum.Unapproved];
            $scope.approvedCount = response.data[StatusTypeEnum.Approved];

            $scope.$apply();
        });
};

Html part:

<button text="'({{unapprovedCount}})'" ...
<button text="'({{approvedCount}})'"...

When I do:

app.controller('someCtrl',
...

$scope.unapprovedCount = 777;

$scope.load = function () {
    client.loadAgreements().
        then(function (response) {
            $scope.unapprovedCount = response.data[StatusTypeEnum.Unapproved];
            $scope.approvedCount = response.data[StatusTypeEnum.Approved];

            $scope.$apply();
        });
};

I can see 777 when page renders. However I don't see any updates from promise. Variable is assigned but view is not updated. And if I add apply method then I am getting error:

Error: [$rootScope:inprog] $digest already in progress

What else can I try, as I am new to angular and don't know how to do this?

EDIT:

I am not sure if this matters but actually this button uses directive:

<button ng-fas-button-with-color-indicator text"'Approved  ({{unapprovedCount}})'" color="red" ...

And text is rendered in some div.

Upvotes: 1

Views: 570

Answers (2)

Alvaro Silvino
Alvaro Silvino

Reputation: 9733

Why you need the $scope.$apply()?

You have to remove it from your code.

The only need of this function is when you are using a third party lib to manipulate variable from the scope, outside of angular's watch.

When you use apply and the digest cycle is ok, nothing changed, will raise this error.

Upvotes: 0

Silvinus
Silvinus

Reputation: 1445

Remove

$scope.$apply();

from your code and check in your console the value of

response.data[StatusTypeEnum.Unapproved]

Upvotes: 1

Related Questions