CODEWITHSUNDEEP
angularjschartscontrollerscope
Alvaro López Sánchez
Alvaro López Sánchez

Reputation: 135

passing $scope to another $controller (using Google Charts in AngularJS)

I'm new on AngularJS. I'm programming a political quiz. All was right, but I have problem to include the values on the Google Chart.

I read that I can use "services" to pass a scope to another controller, but it doesn't working.

This is the code

var aritmetica = angular.module('aritmetica', ['ngAnimate']);

aritmetica.factory("contadoreco",function(){
        return {};
});

aritmetica.factory("contadorsoc",function(){
        return {};
});

aritmetica.controller('encuestaController',  ['$scope', function($scope,contadoreco,contadorsoc) {
  $scope.contadoreco= 0;
  $scope.contadorsoc= 0;
  $scope.pageClass = 'encuesta';
  $scope.sumareco = function(cantidad) { $scope.contadoreco += cantidad};
  $scope.restareco = function(cantidad) { $scope.contadoreco -= cantidad};
  $scope.sumarsoc = function(cantidad) { $scope.contadorsoc += cantidad};
  $scope.restarsoc = function(cantidad) { $scope.contadorsoc -= cantidad};
}]);

aritmetica.controller('MyCtrl', function($scope,contadoreco,contadorsoc) {
      $scope.name = "Name"
});

aritmetica.directive('chart', function($scope,contadoreco,contadorsoc) {
    return {
        restrict: 'A',

        link: function($scope, $elm, $attr) {
          // Create the data table.
          var data = google.visualization.arrayToDataTable([
              ['Económico', 'Social'],
              [$scope.contadoreco, $scope.contadorsoc]
          ]);

          var options = {
              title: 'Age of sugar maples vs. trunk diameter, in inches',
              hAxis: {title: 'Económico', minValue: -130, maxValue: 130},
              vAxis: {title: 'Social', minValue: -130, maxValue: 130},
              legend: 'none',
              width: 400,
              height:400,
          };

          // Instantiate and draw our chart, passing in some options.
          var chart = new google.visualization.ScatterChart($elm[0]);
          chart.draw(data, options);
        }
    }
  });

  google.setOnLoadCallback(function() {
      angular.bootstrap(document.body, ['myApp']);
  });

  google.load('visualization', '1', {packages: ['corechart']});

Upvotes: 0

Views: 245

Answers (2)

teksan
teksan

Reputation: 172

To pass scope to service from anywhere in controller. Make sure you inject service .

controllersModule.controller('MyCtrl', function($scope, $filter, $http, $compile, ngTableParams, **FactoryYouwant**) 
    {

        **FactoryYouwant**.getdata($scope.**scopeYoutwantTopass**).then (function(responseData){    
        var ResponseFromServer =responseData.data;
    }

in service

controllersModule.factory('**FactoryYouwant**, function($http) {
    var responseData = null;

    return {
        getdata : function(**data**){     (you dont have to use $)                  
            responseData = $http.post or whatever actually gets you data;
            return responseData;
        }

      };
});

I hope this helps.

Upvotes: 1

Matt Herbstritt
Matt Herbstritt

Reputation: 4862

Well one problem I can see is that you haven't defined your services as dependencies correctly. You've missed the strings 'contadoreco', 'contadorsoc' so they won't be injected into your controller. It should be like this:

aritmetica.controller('encuestaController',  ['$scope', 'contadoreco', 'contadorsoc', function($scope, contadoreco, contadorsoc) {
// etc...
}]);

There are two different ways to inject dependencies. Like I've posted above or like you've done here:

aritmetica.controller('MyCtrl', function($scope, contadoreco, contadorsoc) {

});

The second one will not work if the code is minified, the first will.

Upvotes: 0

Related Questions