current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite
1

I'm really new to angular and javascript in general. I know there is probably an easy way to do this but I'm just having a hard time figuring it out.

I have an angular service and controller defined.

var app = angular.module('nodeAnalytics', []);

app.factory('myService', function($http) {
  var myService = {
    async: function() {
      // $http returns a promise, which has a then function, which also returns a promise
      var promise = $http.get('https://graph.facebook.com/lowes').then(function (response) {
        // The then function here is an opportunity to modify the response
        console.log(response);
        // The return value gets picked up by the then in the controller.
        return response.data;
      });
      // Return the promise to the controller
      return promise;
    }
  };
  return myService;
});


app.controller('MainCtrl', [
'$scope', 'myService', '$window',
  function($scope, myService, $window){
    $scope.test = 'Hello world!';
     myService.async().then(function(d) {
      $scope.data = d.likes;
      $window.data = $scope.data;
      console.log($scope.data)
    });
}]);

I know that in my html file I an use {{data}} to access scope.data. $window.data allows me to access the scope element in the browser but that has not been very helpful since I don't know how to give the javascript file access to window elements.

How do I access the data variable in a javascript/jquery file.

I'm using highcharts and I want to put the value of data into a chart argument but I don't know how to access it.

  $('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
            series: [{
                data: {{data}},
            }]
        }));
share|improve this question
    
let me know one thing when you are using highcharts ? is it after setting data in window object or before ?. here sequence of execution matter. – Bharat Bhushan Jun 7 '15 at 1:33
    
Highcharts is rendered after the data is set. – Keon Jun 7 '15 at 1:39
    
You can familair with prepared directive, which seems to be easier to use. See reference – Sebastian Bochan Jun 8 '15 at 10:00
up vote 2 down vote

Just have a look at this simple code you will understand

<body ng-app="myApp" data-ng-controller="MainCtrl" id="div1">
  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
  </div>
 <script>
  var app = angular.module('myApp', []);

  app.controller('MainCtrl', function($scope){

    $scope.d=[10, 20, 30, 40];

    });
  </script>
  <script>
$(function () {

  var scope = angular.element("#div1").scope();
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Column chart with negative values'
        },
        credits: {
            enabled: false
        },
        series: [{
        name: 'Bar Chart',
        data: scope.d

        }]
    });
});
</script>

</body>

You have to use angular.element(#dom).scope() to access $scope.d

if you want to make changes in the value of array d before plotting graph you have to use $scope.$apply().

share|improve this answer
    
This should work, but when the graph loads the scope is empty or null. – Keon Jun 7 '15 at 19:23
    
What actually you want to do ?? – shreyansh Jun 7 '15 at 19:25
    
Which scope you are talking I didn't get you ?? – shreyansh Jun 7 '15 at 19:35
up vote 0 down vote

you need to place you chart in a directive. From the directive, you ll then be able to access the scope.

share|improve this answer
    
I don't understand how directives are used to pass variables to a given template, can you explain? – Keon Jun 7 '15 at 1:41
    
you can bind your directive to a controller and then it will work normally. What do you mean by " pass variables to a given template,"? – Ruben Jun 8 '15 at 23:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.