在Angular-chart.js上動態設置數據

說實話我對angularjs有點新，所以這可能是我對角度的基本理解問題，而不是角度圖表。在Angular-chart.js上動態設置數據

我有兩個控制器（PieItemsCtrl和PIECTRL），我想用一個工廠服務（稱爲pieItems）

一方面，他們之間溝通的pieItems工作原理設計PieItemsCtrl。

即：

$scope.slices = pieItems.list();

不管什麼時候在pieItems服務（即添加其他元素）的變化，那麼HTML會自動通過中繼更新：

<div ng-repeat="(key, val) in slices">

然而在PIECTRL我有這條線，我希望餅圖自動更新：

$scope.labels = pieItems.labelsItems(); 
$scope.data = pieItems.data();

似乎在加載/初始化PieCtrl時設置這些數據值，就是這樣。每當pieItems數據更改時，這些範圍值都不會更新。

下面是兩個控制器和工廠對象的來源。而且我還做了一個不可行fiddle，櫃面，幫助

PieItemsCtrl：

app.controller('PieItemsCtrl', function($scope, $http, $rootScope, pieItems) { 

     $scope.slices = pieItems.list(); 
     $scope.buttonClick = function($event) { 
      pieItems.add(
       { 
        Name: $scope.newSliceName, 
        Percent: $scope.newSlicePercent, 
        Color: $scope.newSliceColor 
       } 
      ) 
     } 

     $scope.deleteClick = function(item, $event) { 
      pieItems.delete(item); 
     } 
    } 
)

PIECTRL：

app.controller("PieCtrl", function ($scope, $timeout, pieItems) { 
    $scope.labels = pieItems.labelsItems(); 
    $scope.data = pieItems.data(); 
});

pieItems：

app.factory('pieItems', function() { 
    var items = []; 

    var itemsService = {}; 

    itemsService.add = function(item) { 
     items.push(item); 
    }; 
    itemsService.delete = function(item) { 

     for (i = 0; i < items.length; i++) { 
      if (items[i].Name === item.Name) { 
       items.splice(i, 1); 
      } 
     } 
    }; 
    itemsService.list = function() { 
     return items; 
    }; 

    itemsService.labelsItems = function() { 

     var a = ['x', 'y']; 
     for (i = 0; i < items.length; i++) { 
      a.push(items[i].Name); 
     } 
     return a; 
    }; 
    itemsService.data = function() { 

     var a = [50,50]; 
     for (i = 0; i < items.length; i++) { 
      a.push(items[i].Percent); 
     } 
     return a; 
    }; 

    return itemsService; 
});

來源

2015-11-10 Oliver Watkins

控制器不注意到當工廠更改值。要在Angular digest循環中包含項目數組，請告訴Angular $watch該數組。

如果你不想暴露陣列，創建一個getter：

itemsService.get = function() { return items; }

然後你就可以在您的$腕錶表達你的控制器，吸氣：

$scope.$watch(getItems, watcherFunction, true); 
function getItems() { 
    return pieItems.get(); 
}

的getItems函數在摘要循環中被調用，並且如果值改變並且具有newData參數，則觸發watcherFunction。作爲第三個參數的true創建了一個深度監視。

function watcherFunction(newData) { 
    console.log(newData); 
    // do sth if array was changed 
}

對於更復雜的物件，您可以使用$ watchCollection。

來源

2015-11-10 14:56:18 CMR

謝謝！ :) ............ –

在Angular-chart.js上動態設置數據

回答

相關問題