为什么我不能从控制器更新 AngularJS 服务中的变量值？

Question

我正在使用 AngularJS 服务从 PHP 页面获取 JSON 数据，以呈现 Angular NVD3 图表。

起初，整个页面工作正常，但是当我使用 HTML 按钮更改参数值时，数据不会相应更新/更改。

<h1>Infográficos</h1>
<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>
<nvd3 options="options" data="data"></nvd3>

由于我想创建一个 AngularJS NVD3 图表，我还需要包含以下代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js"></script>
<script src="bower_components/angular-nvd3/angular-nvd3.min.js" type="text/javascript"></script>

如您所见，ng-click 调用了一个函数来更改控制器中$scope.filtro 的值。

.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
            }
        }
    };

    // This is the data that come from a PHP pade through an AngularJS service
    $scope.data = [];

    // This is the default value to $scope.filtro
    $scope.filtro = "ma";

    // This is the function that I'm using to get the values from the button
    $scope.mudaValorDoFiltro = function(novoValorDoFiltro){
        $scope.filtro = novoValorDoFiltro;
    };
    $scope.$watch('filtro', function(filtro){
        $scope.filtro = filtro;
        console.log(filtro); // The variable is being updated when I click the buttons
    });

    // The data in the service is NOT being updated
    InfograficosServico.barChart({filtro: $scope.filtro}).then(function(data) {
        // This is the AngularJS NVD3 object
        $scope.data = [{
            key: "Quantidade de projetos por macrosssegmento",
            values: data
        }];
    });
}]);

这里是服务的完整代码

.factory('InfograficosServico', ['$q', '$http', function ($q, $http) {
    return {
        barChart: function(filtro){
            var defer = $q.defer();
            $http.get(
                'api/bar-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;
        }
    };
}]);

我不明白为什么数据没有被更新，但变量在控制器中被成功观察。

我做错了什么？

请原谅任何英语错误。

Answer 1

我想你想要更新$scope.data，所以...这是我的猜测：

正在正确地观察变化，但你没有做任何事情。

在您的观察者中，您必须采取行动并像这样更新值：

$scope.$watch('filtro', function(filtro){
        $scope.filtro = filtro;
        console.log(filtro); // The variable is being updated when I click the buttons
       //now do something about it, and update the values with the new filter
       _update();
    });

...然后您的 _update 函数再次调用该服务

function _update(){
    // The data should be updated now
    InfograficosServico.barChart({filtro: $scope.filtro}).then(function(data) {
        // This is the AngularJS NVD3 object
        $scope.data = [{
            key: "Quantidade de projetos por macrosssegmento",
            values: data
        }];
    });
}