0

Meu aplicativo verifica estado de uma lampada e cria uma animação na view.

Estou fazendo uma requisição ajax com angular e no retorno de sucesso tenho que animar uma lampada acendendo, segue trecho do codigo:

$scope.checkLuzOk = function (response) {
    (response.data.luzSala === '1') ? aninOn($scope.luzSala) : $scope.aninOff($scope.luzSala);
}

tenho uma luzSala no arquivo html para animação e estou usando o $scope.luzSala como parâmetro nas funcões aninOn() e aninOff(), segue trecho da animação:

var aninOn = function (luz) {
        var images = [
            "light0.png",
            "light10.png",
            "light20.png",
            "light30.png",
            "light40.png",
            "light50.png",
            "light60.png",
            "light70.png",
            "light80.png",
            "light90.png",
            "light100.png"
        ];

        var i = 0;
        $interval(function () {
            if (i >= images.length) {
                i = 0;
            }
            luz = images[i];
            i++;
        }, 50, 11);
    };

O problema é que a imagem não esta sendo alterada quando passo o s

1 Resposta 1

0

Acho que para uma resposta mais completa teríamos de ver o HTML da imagem, pois o código da imagem poderia incluenciar.

O correto para trabalhar com imagens é utilizar a diretiva ngSrc, conforme exemplo da documentação: Errado:

<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>

Correto::

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />

Fonte: https://docs.angularjs.org/api/ng/directive/ngSrc

Além disso, o que você pode fazer é inclur um $digest() após a troca da imagem:

var i = 0;
$interval(function () {
    if (i >= images.length) {
        i = 0;
    }
    luz = images[i];
    $scope.$digest();
    i++;
}, 50, 11);

Dependendo da abordagem da implantação do seu binding, pode ser necessário um $digest() ou um $apply(), verifique o que se encaixa melhor a sua necessidade. Veja mais sobre $digest() e $apply() neste link:

http://gabrielfeitosa.com/angularjs-diferencas-entre-apply-timeout-evalasync-e-digest/

2
  • Obrigado pela resposta Julio. Commented 1/02/2017 às 20:18
  • Obrigado pela resposta Julio. Meu html esta correto, meu problema esta no método genérico para animar a imagem da lampada. Eu ate consigo fazer a animação, porem tenho 10 lampadas para animar e não queria ter que repetir o código de animação 10x. Commented 1/02/2017 às 20:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .