Why can’t I update the variable value in the Angularjs service and pass it as a parameter to PHP?

Question

UPDATE

If I put filtro instead of filtro.filtro in the service, returns an error, since in the URL an array is passed: filtro: {filtro: "ma"}, e. g.

Error

Typeerror: a.values.foreach is not a Function at https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js:4:28299 at Array.foreach (Native) at Svggelement. (https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js:4:28268) at https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js:5:11700 AT H (https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js:1:4227) at Array.fl.each (https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js:5:11664) at Array. b (https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js:4:28170) at Array.ka.call (https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js:3:13577) At Svgsvgelement. (https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js:5:2463) at https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js:3:13502

I have an Angularjs service that takes a parameter from the controller and sends it to a PHP file, which filters the database and returns data in JSON format.

The purpose is to mount graphics with Angular NVD3.

The first rendering is successfully completed, the graph is mounted perfectly. However, I want to change the data of this graph. For this, I have some buttons with the new values of the parameter:

<div class="btn-group btn-group-sm">
    <button type="button" ng-click="mudaValorDoFiltro('ma')" class="btn btn-default">Macrossegmento</button>
    <button type="button" ng-click="mudaValorDoFiltro('es')" class="btn btn-default">Esfera</button>
    <button type="button" ng-click="mudaValorDoFiltro('mo')" class="btn btn-default">Modalidade</button>
    <button type="button" ng-click="mudaValorDoFiltro('st')" class="btn btn-default">Status</button>
</div>

Well, as you can see, ng-click calls a function, which changes the value of the variable $scope.filtro in the controller:

.controller('InfograficosCtrl', ['$scope', 'InfograficosServico' , function($scope, InfograficosServico) {
    $scope.options = {
        chart: {
            type: 'discreteBarChart',
            height: 450,
            margin: {
                top: 20,
                right: 20,
                bottom: 50,
                left: 55
            },
            x: function (d) {
                return d.label;
            },
            y: function (d) {
                return d.value;
            },
            showValues: true,
            valueFormat: function (d) {
                return d3.format(',.0f')(d);
            },
            duration: 500,
            xAxis: {
                axisLabel: 'Macrossegmento'
            },
            yAxis: {
                axisLabel: 'Quantidade',
                axisLabelDistance: -10
            }
        }
    };

    $scope.data = [];
    $scope.filtro = "ma";

    $scope.mudaValorDoFiltro = function(novoValorDoFiltro){
        $scope.filtro = novoValorDoFiltro;
    };
    $scope.$watch('filtro', function(filtro){
        $scope.filtro = filtro;
        console.log(filtro);
    });
    InfograficosServico.barChart({filtro: $scope.filtro}).then(function(data) {
        $scope.data = [{
            key: "Quantidade de projetos por macrosssegmento",
            values: data
        }];
    });
}]);

Notice that I am "watching" or monitoring the value of the variable in the controller with $scope.$watch( . . ..

Also note that the service was injected into the controller.

.factory('InfograficosServico', ['$q', '$http', function ($q, $http) {
    return {
        barChart: function(filtro){
            var defer = $q.defer();
            $http.get(
                'api/chart.php',
                {
                    cache: 'true',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    params: {
                        filtro: filtro.filtro
                    }
                }
            )
            .success(function(data) {
                defer.resolve(data);
            });

            return defer.promise;
        }
    };
}]);

TL;DR

I need to update $scope.filtro, simultaneously sending the new values to a service that uses the parameter to filter a database through PHP.

Answer 1

I’ve managed to solve my problem:

I was updating my variable correctly, but I wasn’t sending it to the service.

SOLUTION

I only had to change one detail in the controller: I put the function that received the promise of the service within a function called _update() and called _update() within the scope of the function that monitors the variable filtro. Thus:

.controller('InfograficosCtrl', ['$scope', 'InfograficosServico' , function($scope, InfograficosServico) {
    $scope.options = {
        chart: {
            type: 'discreteBarChart',
            height: 450,
            margin: {
                top: 20,
                right: 20,
                bottom: 50,
                left: 55
            },
            x: function (d) {
                return d.label;
            },
            y: function (d) {
                return d.value;
            },
            showValues: true,
            valueFormat: function (d) {
                return d3.format(',.0f')(d);
            },
            duration: 500,
            xAxis: {
                axisLabel: $scope.filtro
            },
            yAxis: {
                axisLabel: 'Quantidade',
                axisLabelDistance: -10
            }
        }
    };

    $scope.data = [];
    $scope.filtro = "ma";

    $scope.mudaValorDoFiltro = function(novoValorDoFiltro){
        $scope.filtro = novoValorDoFiltro;
    };
    $scope.$watch('filtro', function(filtro){
        $scope.filtro = filtro;
        console.log(filtro);
        _update();
    });
    function _update(){
        InfograficosServico.barChart({filtro: $scope.filtro}).then(function(data) {
            $scope.data = [{
                key: "Quantidade de projetos por macrosssegmento",
                values: data
            }];
        });
    }
}]);