How to use $ interval and $ watch in angularjs

Question

How to use $ interval and $ watch in angularjs

Navigation

#1 by (2 votes)

0

I have a function that makes a request to the server and it brings me data in JSON and I save in the variable numero any number:

var numero

$scope.Cola = function() {

    Ticket.Colaservices({

        id_usuario: LoginData.getData().id_usuario,
        token: LoginData.getData().token,
        id_sucursal: LoginData.getData().id_sucursal,
        id_moduloatencion: LoginData.getData().moduloatencion_id

    }, function (response) {

        $scope.DateCola = response.data;
        var rut = JSON.parse(JSON.stringify(response.data.rut.split('.').join('')));
        numero = response.data.numero;
        $scope.rutsinpunto = rut;

    });

};

$scope.Cola();

This occurs when you enter the page. Later I have a button llamar that communicates with the server and a token and as response returns a new number, to get it I have to update the function above, the problem is that the return is asynchronous, that is to say that in Any time you can reach me.

To obtain it I do the following:

$scope.llamar = function() {

    //mando ciertos datos
    Llamado.Llamar({
        id_usuario: LoginData.getData().id_usuario,
        token: LoginData.getData().token,
        id_sucursal: LoginData.getData().id_sucursal,
        id_moduloatencion: LoginData.getData().moduloatencion_id
    }, function (response) {

        // y en la respuesta creo un interval y ejecuto $scope.Cola() y muestro en consola la variable numero para saber cuando cambie, ¡cosa que sí hace!

        var resultado = $interval(function () {
            $scope.Cola();
            console.log(numero);
        }, 1000);

        // acá creo un watch para detectar el cambio ¡pero no funciona! no reconoce cuando es distinto el numero.

        $scope.$watch(numero, function (newValue, oldValue) {
            if (newValue === oldValue) {
                return;
            }
            $interval.cancel(resultado);
            alert("el nuevo valor es " + newValue + " y el antiguo es: " + oldValue);

        });

    });

};

How can I solve it? the idea is that when the change is detected as an example, show me the alert .

angularjs

asked by Hernan Humaña 03.03.2017 в 19:39

source

1 answer

ggplot2 shows nothing or gives error Error with Angular-CLI, when generating run ng generate route

score 2 · Accepted Answer

I do not know if those two codes belong to the same $scope , but assuming yes, the first thing I see is that the variable numero does not belong to $scope . For the following code to detect a change in the variable numero , the latter must be declared as follows:

$scope.numero = 0;

$scope.$watch("numero", function(newValue, oldValue) {
    console.log(oldValue, newValue);
});

$scope.llamar = function() {
    $scope.numero = 1;
}

But as for your problem remember that in JavaScript you can send as an argument to a function another function and execute it when you need it, I think it would be easier to do something like this:

$scope.numero = 0;

$scope.Cola = function (dispatch) {

    Ticket.Colaservices({

        id_usuario: LoginData.getData().id_usuario,
        token: LoginData.getData().token,
        id_sucursal: LoginData.getData().id_sucursal,
        id_moduloatencion: LoginData.getData().moduloatencion_id

    }, function(response) {

        $scope.DateCola = response.data;
        var rut = JSON.parse(JSON.stringify(response.data.rut.split('.').join('')));
        $scope.rutsinpunto = rut;

        if (dispatch) {

            dispatch.call($scope, $scope.numero, response.data.numero);

        }

        $scope.numero = response.data.numero;

    });

}

$scope.Cola();

And then, from your llamar method you can do something like this:

$scope.llamar = function () {

    //mando ciertos datos
    Llamado.Llamar({
        id_usuario: LoginData.getData().id_usuario,
        token: LoginData.getData().token,
        id_sucursal: LoginData.getData().id_sucursal,
        id_moduloatencion: LoginData.getData().moduloatencion_id
    }, function(response) {

        $scope.Cola(function (oldvalue, newvalue) {

            console.log(oldvalue, newvalue);

        });

    });

}