1

Estou tendo um problema ao executar uma função ao clicar no icheck. No caso, a função só é chamada caso eu dê um setTimeout de 1 milisegundo, menos do que isso ou sem timeout a função não é executada. Como eu posso fazer para executar essa função sem utilizar timeout?

vm.selecionaFiltros = function(){
    $('.marcas').iCheck({
        checkboxClass: 'icheckbox_minimal',
        radioClass: 'iradio_minimal',
    });

    $timeout(function() {
        $('.marcas').on('ifChanged', function (event) {
            console.log('1');
        });
    }, 100);
}
5
  • você executa todo esse trecho toda vez que o usuário clica no checkbox? .iCheck transforma os elementos em objetos iCheck e normalmente só é usado uma vez, logo após a página carregar. Além disso, se é para detectar o click você deveria usar os eventos ifClicked ou ifToggled. Commented 7/07/2016 às 0:13
  • Olá @EduardoMoreira, eu testei utilizando o ifClicked e Toggled e removi a inicialização o iCheck de dentro da função, mas o meu problema persiste, já que o problema não é no iCheck, é no tempo de rendenização do site, que não consegue pegar o evento ao clicar. A função selecionaFiltros é chamada após terminar o ng-repeat da listagem de filtros. Commented 7/07/2016 às 10:56
  • @BernardoKowacic a função vm.selecionaFiltros é chamada automaticamente ou precisa ter alguma interação do usuário? Exemplo, clicar em um checkbox? Commented 11/07/2016 às 11:24
  • Olá @CelsomTrindade, então, a função é chamada quando carrega a página, automáticamente. Atualmente eu tirei a inicialização de dentro da função, deixei apenas a parte que verifica se foi marcado ou não. Commented 11/07/2016 às 19:39
  • @BernardoKowacic baseado nisso vou tentar uma resposta que eu imagino que seja o problema.. Conversamos mais ao longo dos comentários ali. Commented 11/07/2016 às 22:19

1 Resposta 1

2
+50

Se essa função vm.selecionaFiltros é chamada de modo automático, o possível problema é que ela esteja acontecendo fora do escopo do AngularJs.

O que isso significa?

Significa que o digest cycle já passou, logo as mudanças não serão aplicadas. digest cycle é um processo do AngularJs (também conhecido como dirty checking) que faz a comparação de todos os bindings através dos watchers ({{meuEscopo}} ou ng-bind="meuEscopo" - cada elemento desse em sua view gera um novo watcher) para verificar se aquele dado sofreu alteração e, se sim, atualizar a view com esse novo valor.

Se a sua função é executada após o digest cycle significa que por mais que as mudanças ocorram o AngularJs ainda não "sabe" disso.

Quando um digest cycle é disparado?

Sempre são disparados quando a aplicação carrega ou através de interações com funções do próprio AngularJS, por exemplo, ngClick, ngChange, ngBlur, etc.. Ou, dentro de um controller ou directive, através do uso de $timeout (que é o que você está fazendo) e $interval e, por fim, através de uma chamada manual, explicado melhor abaixo.

Como resolver?

O modo de resolver isso seria chamando manualmente o digest cycle.

Existem 2 métodos de se obter o mesmo resultado final:

  • $scope.$digest()
  • $scope.$apply()

Ambos são semelhantes e irão lhe dar o mesmo resultado final. Porém o $scope.$apply() irá disparar o evento $rootScope.$digest() que afeta todos os escopos e seus elementos child enquanto o $scope.$digest() afeta apenas o escopo local e seus elementos child, lhe dando uma melhor perfomance, já que não irá afetar a aplicação como um todo.

Exemplo simples, supondo que na mesma view que esse ng-repeat você possua um directive que mostre o clima, ele não tem ligação alguma com essa lista e possui seu próprio escopo, uma vez que ele vem de um directive. Se você chamar $scope.$digest(), o digest cycle não irá verificar os watchers que pertencem a ele, logo você tem mais performance. Mas se você chamar o $scope.$apply(), como ele irá disparar o $rootScope.$digest() ao invés do $scope.$digest() - ou seja, o ciclo global, aquele directive de clima e todos os seus watchers e child também serão validados pelo ciclo.

Quando usar um ou outro?

Se você tem certeza que a função chamada só irá afetar valores que estão dentro desse escopo, chame o $scope.$digest(). Mas se você sabe que a interação com essas funções podem interferir em escopos que estão fora do atual, use o $scope.$apply().

Exemplo: Supondo que essa lista de ng-repeat seja para selecionar qual o tipo de temperatura é exibido no directive. Celsius, Kelvin ou Fahrenheit, então se eu clicar em um desses elementos do ng-repeat, eu preciso alterar um elemento fora do meu escopo, logo, chamo o $scope.$apply().

Sendo assim, seu código ficaria assim:

vm.selecionaFiltros = function(){
    $('.marcas').iCheck({
        checkboxClass: 'icheckbox_minimal',
        radioClass: 'iradio_minimal',
    });

    $('.marcas').on('ifChanged', function (event) {
        console.log('1');
        $scope.$digest(); //aqui
    });

    $scope.$digest(); //ou aqui
}

Se quiser, ainda pode remover a declaração da função usando o vm e usar uma função JS simples.

function selecionaFiltros() {
    [...]
}

//chamada da função
selecionaFiltros();

O vm na frente serve para executar uma função que é chamada através da view, com ng-click, ng-blur, etc..


Nota: Apenas para lembrar, como você está usando a syntax de vm, precisa injetar o $scope antes de poder usá-lo.

2
  • Olá @CelsomTrindade, eu coloquei o $scope.$digest(); dentro da função do ifChanged e não aconteceu nada, continuou sem funcionar, tentei colocar em na linha de baixo, mas aí deu erro dizendo que $digest não é uma função. Tentei adicionar o $digest no inject do módulo e na chamada da função e deu erro também. Estou injetando o $scope para usá-lo. Com o $apply ocorreu a mesma coisa. Commented 12/07/2016 às 11:21
  • @BernardoKowacic o que você precisa injetar é o $scope, não o $digest ou o $apply. Caso ainda assim não dê certo, monte um fiddle ou plunkr onde o problema possa ser reproduzido para poder analisar melhor. Commented 12/07/2016 às 12:06

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 .