Solved - Angularjs + Pagseguro - The list does not update via callback

Question

I’m trying to list the types of payments available in the Secure Pay Api.

To do this I use a function js of the call pagseguro PagSeguroDirectPayment.getPaymentMethods()

The problem is that in the callback of this function, I can’t access my angular variables. When I create a normal variable, it can access it. If I put a button to put the data of the normal variable in the angular one it works, but I wanted it to press the callback of the function.

                var self = this;
                this.lista = [];

                PagSeguroDirectPayment.getPaymentMethods({
                    success: function(response) {                           
                        self.lista.push({"nome": "Cartão de Crédito", "img":"../static/img/cartao.png", "objpag": response.paymentMethods.CREDIT_CARD});
                        self.lista.push({"nome": "Débito Online", "img":"../static/img/debito.png", "objpag": response.paymentMethods.ONLINE_DEBIT});
                        self.lista.push({"nome": "Boleto", "img":"../static/img/barcode.png", "objpag": response.paymentMethods.BOLETO});
                    },
                    error: function(response) {
                        //tratamento do erro
                    },
                    complete: function(response) {
                    }

                });

Answer 1

For Binding to work in a callback I have to force it. For this to be possible there is the function $Scope. $apply().

So in my code it would have to look like this:

            var self = this;
            this.lista = [];

            PagSeguroDirectPayment.getPaymentMethods({
                success: function(response) {                           
                    self.lista.push({"nome": "Cartão de Crédito", "img":"../static/img/cartao.png", "objpag": response.paymentMethods.CREDIT_CARD});
                    self.lista.push({"nome": "Débito Online", "img":"../static/img/debito.png", "objpag": response.paymentMethods.ONLINE_DEBIT});
                    self.lista.push({"nome": "Boleto", "img":"../static/img/barcode.png", "objpag": response.paymentMethods.BOLETO});
                    $scope.$apply();
                },
                error: function(response) {
                    //tratamento do erro
                },
                complete: function(response) {
                }

            });

who wants more information access the link: http://blog.fernandomantoan.com/angularjs-e-o-scope-apply/

I’m leaving the solution here more to help anyone who ever needs it, because this stackoverflow has never helped me at all.