Angular/JS：我如何将作用域变量传递给JavaScript函数？

Question

Angular/JS：我如何将作用域变量传递给JavaScript函数？

4

我正在尝试访问我创建的控制器中定义的变量，以便我可以循环列表并在Google地图API中放置标记。我尝试了很多方法，但我卡住了。这是控制器：

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

这是我试图访问变量的部分。

<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>

编辑

在添加了一个条件 (ng-if="meteorites") 后，我接收到的答案完美地运行了：

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

- Alex Karlsson

3

很遗憾，你不能在非 Angular JavaScript 中使用 Angular 变量。为什么不将该代码放入你的控制器中呢？ - Nicholas Robinson

在这种情况下，为什么要有单独的<script>标签呢？正如Nicolas所说，这可以很容易地放入您的控制器中。您甚至可以将Angular变量传回页面以供其他脚本使用。必须有一个原因来使用单独的脚本标记；如果您告诉我们该原因，它将有助于我们回答您的问题。 - George Stocker

我之所以这样做，只是因为我以前从未使用过angular，并且试图通过完成这个小项目来学习它。谷歌API提供了这个脚本，我只是添加了angular来读取一些流星记录的JSON，并尝试将它们添加到地图上。我不确定如何从控制器中调用它来“启动”地图，有什么建议吗？ - Alex Karlsson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MoLow · Accepted Answer

你可以为此构建一个指令：

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>