How to access angular scope variable in JavaScript file

Question

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}},
            }]
        }));

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
– Bharat Bhushan, Commented Jun 7, 2015 at 1:33
You can familair with prepared directive, which seems to be easier to use. See reference — Sebastian Bochan
– Sebastian Bochan, Commented Jun 8, 2015 at 10:00

shreyansh · Accepted Answer · 2015-06-07 04:32:19Z

2

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().

answered Jun 7, 2015 at 4:32

shreyansh

1,6875 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Keon Cummings Over a year ago

This should work, but when the graph loads the scope is empty or null.

shreyansh Over a year ago

What actually you want to do ??

shreyansh Over a year ago

Which scope you are talking I didn't get you ??

Ruben · Accepted Answer · 2015-06-07 00:22:53Z

0

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

answered Jun 7, 2015 at 0:22

Ruben

1952 silver badges12 bronze badges

2 Comments

Keon Cummings Over a year ago

I don't understand how directives are used to pass variables to a given template, can you explain?

Ruben Over a year ago

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,"?

Collectives™ on Stack Overflow

How to access angular scope variable in JavaScript file

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related