How to access angular scope variable in JavaScript file

javascript jquery angularjs highcharts

12,918

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

12,918

Author by

Keon

keoncummings.com

Updated on July 21, 2022

Comments

Keon almost 2 years

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

Bharat Bhushan almost 9 years

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.
Keon almost 9 years

Highcharts is rendered after the data is set.
Sebastian Bochan almost 9 years

You can familair with prepared directive, which seems to be easier to use. See reference
LF00 almost 7 years

This works stackoverflow.com/q/17960622/6521116

Keon almost 9 years

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

This should work, but when the graph loads the scope is empty or null.
shreyansh almost 9 years

What actually you want to do ??
shreyansh almost 9 years

Which scope you are talking I didn't get you ??
Ruben almost 9 years

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