Блог

Я использую Angular и d3 для создания приложения панели мониторинга. Некоторые важные структурные элементы:

1. Контроллер временных рамок
2. директивы d3 ( d3-choropleth например, например), которые используются через определенные контроллеры.
3. Служба JSON $http , которая собирает данные и отправляет их на отдельные контроллеры.

Пока это моя структура. Мой вопрос: как мне реализовать функциональность таймфрейма в остальной части моего приложения?Значение контроллера / формы таймфрейма застряло в его собственной области видимости. Должен ли я передавать данные таймфрейма в глобальную переменную, а затем каким-то образом привязывать переменную к службе запросов JSON?

Вот мой сервис:

 // Service for making JSON requests
myApp.factory('requestService', function($http) {
   return {
        getDownloadsLineData: function() {
             // Return the promise
             return $http({
                        url: base_url   downloads, 
                        method: "GET",
                        // These parameters are dynamically changed by 
                        // a global timeframe control
                        params: { start: '2013-01-01',
                                end: '2013-02-01',
                                interval: 'month',
                                country: 'US',
                                location_bin: 'countries'}
                     })
                    .then(function(result) {
                        // Resolve the promise as the data
                        return result.data;
                    });
        }
   }
});
 

Контроллер таймфрейма:

 myApp.controller('TimeframeCtrl', ['$scope',
                                   '$cookieStore',
                                   function ($scope, $cookieStore) {
                                   ...
 

Пример одного контроллера d3:

 myApp.controller('DownloadsLineCtrl', ['$scope', 
                                       'requestService', 
                                       function($scope, requestService){
  $scope.title = 'Downloads over Time';
  $scope.tooltip = 'Test tooltip';
  requestService.getDownloadsLineData().then(function(data) {
        $scope.d3Data = data;
    });
}]);
 

Похоже, вам нужно TimeframeService .

TimeframeController Позаботится о отображении параметров таймфрейма в представлении и позволит usrr настроить его (я полагаю). Затем он сохранит их обратно в TimeframeService .

requestService Это также будет зависеть от TimeframeService и извлекать параметры для настройки запроса.

_{Кстати, если вы используете $cookies для хранения параметров, TimeframeService следует позаботиться об этом.}