Angular/JS: How do I pass a scope variable to a javascript function?

Question

I'm trying to access a variable defined within a controller i created, so that I can loop through the list and place markers with the google maps api. I've tried a bunch of things, but I'm stuck. This is the controller:

app.controller('MainController', ['$scope', 'meteorite', function($scope, meteorite) { 
meteorite.success(function(data) { 
$scope.meteorites = data;});
}]);

And this is the part where im trying to access the variable.

<div id="map">
</div>

<div class="main" ng-controller="MainController">
  <div id="stuff" ng-repeat="meteorite in meteorites">
    <h1>{{meteorite.name}} : {{meteorite.mass | number}}</h1> 
  </div>
</div>

<script>
  var map;
  var myLatLng = {lat: -25.363, lng: 131.044};

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: myLatLng,
      zoom: 10
    });

    for (var i = 0; i < [This is where i want to access meteorites]; i++) {
      var marker = new google.maps.Marker({
        position: {meteorites[i].lat, meteorites[i].long},
        map: map
      });
    }
  }
</script>

EDIT

The answer i received worked perfectly after adding one thing (ng-if="meteorites"):

<g-map ng-if="meteorites" meteorites="meteorites"></g-map>

Unfortunately, you can't use angular variables in non-angular JavaScript like that. Why don't you just put that code in your controller? — Nicholas Robinson
– Nicholas Robinson, Commented Aug 30, 2016 at 14:34
In this case, why do you have the separate <script> tag? As Nicolas says, this can easily go into your controller. You can even pass angular variables back to the page for use in other scripts. There has to be a reason for that separate script tag; it will help us to answer your question if you tell us what that reason is. — George Stocker
– George Stocker, Commented Aug 30, 2016 at 14:35
The only reason why I have it like this is because I never used angular before, and trying to learn it by doing this little project. The google api provided this script, and i just added angular to read some json off meteorite records and tried adding those to the map. I dont think I understand how I would call this from the controller to "launch" the map, any tips? — Alex Karlsson
– Alex Karlsson, Commented Aug 30, 2016 at 14:58

MoLow · Accepted Answer · 2016-08-30 17:08:38Z

2

you could probobly build a directive for that:

angular.module('app', [])
.controller('MainController', ['$scope', function($scope) { 
  $scope.meteorites = [{name:'aaa', mass:1, lat: -25.363, long: 131.044}];
}])
.directive('gMap', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div style="height:200px;"></div>',
    scope: {meteorites: '='},
    link: function(scope, element) {
      var myLatLng = {lat: -25.363, lng: 131.044},
          map = new google.maps.Map(element[0], {
                      center: myLatLng,
                      zoom: 10
                });

      angular.forEach(scope.meteorites, function(meteorit) {
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(meteorit.lat, meteorit.long),
          map: map
        });
      })
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map">
</div>

<div class="main" ng-app="app" ng-controller="MainController">
  <div id="stuff" ng-repeat="meteorite in meteorites">
    <h1>{{meteorite.name}} : {{meteorite.mass | number}}</h1> 
  </div>
  <g-map meteorites="meteorites"></g-map> 
</div>

answered Aug 30, 2016 at 17:08

MoLow

3,0642 gold badges23 silver badges41 bronze badges

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

4 Comments

MoLow Over a year ago

dose the script tag have a async attribute? try removeing it.

Alex Karlsson Over a year ago

Thank you so much! This really helped in understanding how to approach these type of problems. Big thumbs up!

Alex Karlsson Over a year ago

Hm, the map loads and up untill that all is fine, but when it comes to the foreach loop it says that scope.meteorites is undefined, and it wont enter the loop. I have tried a bunch of things, but I cant seem to loop over the data, any ideas?

MoLow Over a year ago

Great :) glad I could help

Collectives™ on Stack Overflow

Angular/JS: How do I pass a scope variable to a javascript function?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related