爲什麼我無法從控制器更新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 
     }]; 
    }); 
}