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.
vm.selecionaFiltros
é chamada automaticamente ou precisa ter alguma interação do usuário? Exemplo, clicar em umcheckbox
?