CODEWITHSUNDEEP
javascriptjqueryangularjshighcharts
Keon Cummings
Keon Cummings

Reputation: 1811

How to access angular scope variable in JavaScript file

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

Upvotes: 2

Views: 13258

Answers (2)

shreyansh
shreyansh

Reputation: 1687

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

Upvotes: 2

Ruben
Ruben

Reputation: 195

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

Upvotes: 0

Related Questions