为什么我无法从控制器更新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的价值fnction控制器。

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