Function does not run without setTimeout

Question

I’m having a problem executing a function by clicking on icheck. In case, the function is only called if I give a setTimeout 1 millisecond, less than that or without timeout the function is not executed. How can I do to execute this function without using timeout?

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

    $timeout(function() {
        $('.marcas').on('ifChanged', function (event) {
            console.log('1');
        });
    }, 100);
}

Answer 1

If that function vm.selecionaFiltros is called automatically, the possible problem is that it is happening outside the scope of the AngularJs.

What does that mean?

It means that the digest cycle has passed, so the changes will not be applied. digest cycle is a process of AngularJs (also known as Dirty checking) that makes the comparison of all bindings through the watchers ({{meuEscopo}} or ng-bind="meuEscopo" - each element of this in your view generates a new watcher) to check whether that data has changed and, if so, update the view with that new value.

If your function is executed after the digest cycle means that no matter how much the changes AngularJs still don’t "know" it.

When a digest cycle is fired?

They are always fired when the application loads or through interactions with functions of Angularjs itself, for example, ngClick, ngChange, ngBlur, etc.. Or, within a controller or directive, through the use of $timeout (which is what you’re doing) and $interval and, finally, through a manual call, explained better below.

How to solve?

The way to solve this would be to manually call the digest cycle.

There are 2 methods of obtaining the same final result:

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

Both are similar and will give you the same end result. However $scope.$apply() will trigger the event $rootScope.$digest() which affects all scopes and their elements Child as long as the $scope.$digest() affects only the local scope and its elements Child, giving you a better performance, since it will not affect the application as a whole.

Simple example, assuming in the same view as this ng-repeat you own a directive that shows the weather, it has no connection with that list and has its own scope, since it comes from a directive. If you call $scope.$digest(), the digest cycle will not check the watchers that belong to him, so you have more performance. But if you call the $scope.$apply(), how will he fire the $rootScope.$digest() instead of $scope.$digest() - that is, the global cycle, that weather Directive and all its Watchers and Child will also be validated by the cycle.

When using one or the other?

If you are sure that the called function will only affect values that are within that scope, call the $scope.$digest(). But if you know that the interaction with these functions can interfere in scopes that are outside the current one, use the $scope.$apply().

Example: Assuming this list of ng-repeat whether to select what type of temperature is displayed on directive. Celsius, Kelvin or Fahrenheit, then if I click on one of these elements of ng-repeat, I need to alter an element outside my scope, so I call the $scope.$apply().

So your code would look like this:

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
}

If you want, you can still remove the function declaration using the vm and use a function JS simple.

function selecionaFiltros() {
    [...]
}

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

The vm in front serves to perform a function that is called through the view, with ng-click, ng-blur, etc...

---

Note: Just to remind you, how you’re using the syntax of vm, needs to inject the $scope before I can use it.