Blog do Andrei

AngularJS: meu template não atualiza!

Introduction

user

Andrei Hodecker


AngularJS: meu template não atualiza!

Posted by Andrei Hodecker on .
Featured

AngularJS: meu template não atualiza!

Posted by Andrei Hodecker on .

Problema

Recentemente tive um problema com o AngularJS, mais especificamente utilizando a biblioteca sweet-alert. O que acontecia é que ao passar uma função anônima de confirmação, o model era alterado mas o template não atualizava.

swal({ title: "Você tem certeza?", 
       text: "Você tem certeza que deseja excluir este caso de teste?",
       type: "warning", 
       showCancelButton: true,
       confirmButtonColor: "#DD6B55",
       confirmButtonText: "Sim!",
       cancelButtonText: "Cancelar",
       closeOnConfirm: false },
       function({
         $rootScope.Exercicio.casos.splice(index, 1);
         swal("Excluído!", "O caso de teste foi excluído!", "success");
       }
    );

O problema é que toda atualização no $scope (ou $rootScope) que acontece em eventos fora do AngularJS (outras biblioteca, eventos nativos, etc) não é "observável" pelo Angular, felizmente a solução é bem simples.

Solução

Para resolver este problema, basta chamar a função $digest() após modificar o $scope. Desta forma o AngularJS consegue atualizar o template.

$rootScope.Exercicio.casos.splice(index, 1);
swal("Excluído!", "O caso de teste foi excluído!", "success");
$rootScope.$digest();

Observação

Por acaso acabei descobrindo que existe uma diretiva do sweetalert que já cuida disso pra você. Muito bom! =)

user

Andrei Hodecker

http://andreih.com