AngularJSサービスの変数値をコントローラから更新できないのはなぜですか？

Question

私は角度NVD3チャートをレンダリングするためにAngularJSサービスを使用してPHPページからJSONデータを取得しています。

最初はページ全体が正常に動作しますが、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 
     }]; 
    }); 
}