Ответ 1
Так как диаграммы связаны с тяжелой манипуляцией DOM, директивы - это путь.
Данные могут храниться в контроллере
App.controller('Ctrl', function($scope) {
$scope.data = [[[0, 1], [1, 5], [2, 2]]];
});
И вы можете создать собственный HTML-тег 1, указав модель, которую вы хотите получить из
<chart ng-model='data'></chart>
который angular может скомпилировать по директиве
App.directive('chart', function() {
return {
restrict: 'E',
link: function(scope, elem, attrs) {
var data = scope[attrs.ngModel];
$.plot(elem, data, {});
elem.show();
}
};
});
Этот процесс похож на большинство плагинов, которые изменяют DOM.
- * -
Кроме того, вы можете следить за изменениями в базовых данных диаграммы и перерисовывать их, чтобы таким образом вы могли захватывать данные через службу $http от своего контроллера и автоматически обновлять представление. Это может быть достигнуто путем изменения функции связывания в объекте определения директивы
var chart = null,
opts = { };
scope.$watch(attrs.ngModel, function(v){
if(!chart){
chart = $.plot(elem, v , opts);
elem.show();
}else{
chart.setData(v);
chart.setupGrid();
chart.draw();
}
});
Обратите внимание на использование Flot API в рамках директивы для достижения желаемого.
1 Также может быть атрибутом.