从 Javascript 调用传递 AngularJS 值

Question

我被困住了，需要帮助。我正在构建一个使用 Google 地图 API 的应用程序，我决定使用 Angular 因为我喜欢它的即时查询感觉。但是，我运行遇到了一个问题，我需要将所选目的地的值（在 angular 中吐出）传递给我已经创建的 javascript 函数（然后会给我我需要的转弯指示）。被困了一个小时，任何帮助将不胜感激。我尝试使用 ng-click 并制作我的函数 $scope.go = function (value) {} 但仍然没有运气。我尝试获取按名称选择的元素及其关联的文本值，但它对我来说只是 returns 列表中的第一个值，而不是我单击的特定值。 .再次感谢

函数：

function go(value) 
{

val = document.getElementById('name').text;
alert(val);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();


  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(41.850033, -87.6500523)
  };
  var map = new google.maps.Map(document.getElementById('googleMap'),
      mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('side'));



 var request = {
    origin: new google.maps.LatLng(41.850033, -87.6500523),
    destination: new google.maps.LatLng(33.4625,-88.8200),
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

}

HTML:

<table>
<tr>
 <td>
    <input ng-model ="filterKey">
      <ul ng-repeat = "location in locations | filter:filterKey ">  <a id='name', onclick = "go(location.name)" > go {{location.name}} </a> <br> {{location.phone}} <br>  {{location.addr}} <br> <br> 




      </ul></ul>
  </td>

完整代码：

  <!DOCTYPE html>
<html ng-app>
<head>
<script src="http://maps.googleapis.com/maps/api/js">
</script>


 <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>



<script>
var initialLocation = null;
var myCenter = new google.maps.LatLng(33.4625,-88.8200);
function initialize()
{
var mapProp = {
  center: myCenter,
  zoom:11,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myCity = new google.maps.Circle({
  center: myCenter,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
  });


var locations = [
                  ['Harveys','33.4554015','-88.814941','food_pointer.jpg' ],
                  ['The Veranda','33.4526087', '-88.8194257','food_pointer.jpg' ],
                  ['Casa Bravo Mexican','33.4532565', '-88.8101641','food_pointer.jpg' ],
                  ['Papa Johns','33.4565651', '-88.8135248','food_pointer.jpg' ],
                  ['Umi Hibachi','33.4515882', '-88.822193','food_pointer.jpg' ],
                  ['Christy"s Hamburgers','33.454202', '-88.8312274','food_pointer.jpg' ],
                  ['Subway','33.4530025', '-88.8174516','food_pointer.jpg' ],
                  ['Petty"s BBQ','33.4530025', '-88.8174516','food_pointer.jpg' ],
                ];

for(i = 0; i < locations.length; i++)
{
  var marker = new google.maps.Marker({
  position: new google.maps.LatLng(locations[i][1],locations[i][2]),
  icon: locations[i][3] });
  marker.setMap(map);
};

myCity.setMap(map);
}


var browserSupportFlag =  new Boolean();

  if(navigator.geolocation) {
    browserSupportFlag = true;
    alert("location Tracked");
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      alert(initialLocation);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  }
  // Browser doesn't support Geolocation
  else {
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }

  function handleNoGeolocation(errorFlag) {
    if (errorFlag == true) {
      alert("Geolocation service failed.");
    } else {
      alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
    }
    map.setCenter(initialLocation);
  }


$scope.go = function(value) 
{

val = document.getElementById('name').text;
alert(val);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();


  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(41.850033, -87.6500523)
  };
  var map = new google.maps.Map(document.getElementById('googleMap'),
      mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('side'));






  var request = {
    origin: new google.maps.LatLng(41.850033, -87.6500523),
    destination: new google.maps.LatLng(33.4625,-88.8200),
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

}
google.maps.event.addDomListener(window, 'load', initialize);













</script>
</head>
<ul ng-init=" locations = [
                  {name: 'Harveys', type: 'American', special: 'Classic Dining' , phone: '111-222-3333', addr: '121 Cashview Ave',lat: '33.4554015', long: '-88.814941', i: '1'},
                  {name: 'The Veranda', type: 'American' , special: 'Neo Dining' , phone: '111-222-3333' , addr: '121 Cashview Ave'},
                  {name: 'Casa Bravo Mexican', type: 'Meixcan', special: 'Meixcan Dining' , phone: '111-222-3333' , addr: '121 Cashview Ave'},
                  {name: 'Papa Johns', type: 'American', special: 'Fast Food Pizza delivery' , phone: '111-222-3333', addr: '121 Cashview Ave'},
                  {name: 'Umi Hibachi', type: 'American', special: 'Japanese Dining', phone: '111-222-3333', addr: '121 Cashview Ave'},
                  {name: 'Christys Hamburgers', type: 'American', special: 'Fast Food Burgers' , phone: '111-222-3333', addr: '121 Cashview Ave'},
                  {name: 'Subway', type: 'American', special: 'Fast Food Sandwiches subs', phone: '111-222-3333', addr: '121 Cashview Ave'},
                  {name: 'Pettys BBQ', type: 'American', special: 'Fast Food barbecue southern', phone: '111-222-3333', addr: '121 Cashview Ave'}
                ]"> </ul>



<table>
<tr>
 <td>
    <input ng-model ="filterKey">
      <ul ng-repeat = "location in locations | filter:filterKey ">  <a id='name', ng-click = "go(location.name)" > go {{location.name}} </a> <br> {{location.phone}} <br>  {{location.addr}} <br> <br> 




      </ul></ul>
  </td>
    <center>
  <td  id="googleMap" align = "right" style="width:1200px;height:500px;;"> 
  </td> 
    </center>
  <td id= "side"> </td>
</tr>

</body>
</html>

Answer 1

你有两个位置数组，这有点令人困惑。由于外部资产，我最终没有创建 jsfiddle，但我发现 HTML 存在一些问题并已更正（没有开始的正文标签、额外标签等）。

我为您的 HTML 页面指定了一个应用程序名称 ExampleApp，该页面包含一个名为 ExampleController 的控制器。在你的控制器中，我已经放置了你所有的 google 地图代码和 go 函数。我摆脱了你在 HTML 中的初始化，因为 $scope.locations 现在是那个 ng-repeat 的引用。我注释掉了你的大部分 go 函数代码，因为我不确定它应该做什么，但你可以取消注释并相应地重新合并。

您会在 HTML 中看到我做 ng-click="go($index)"，它只是引用 locations 数组。无需执行 document.getElem...stuff

<!DOCTYPE html>
<html ng-app="ExampleApp">
<head>
  <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
  <script src="http://maps.googleapis.com/maps/api/js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  <script>
    var app = angular.module('ExampleApp',[]);

    app.controller('ExampleController', function($scope)
    {
      $scope.locations = [
        {name: 'Harveys', type: 'American', special: 'Classic Dining' , phone: '111-222-3333', addr: '121 Cashview Ave',lat: '33.4554015', long: '-88.814941', i: '1'},
        {name: 'The Veranda', type: 'American' , special: 'Neo Dining' , phone: '111-222-3333' , addr: '1521 Cashview Ave'},
        {name: 'Casa Bravo Mexican', type: 'Meixcan', special: 'Meixcan Dining' , phone: '111-222-3333' , addr: '121 Cashview Ave'},
        {name: 'Papa Johns', type: 'American', special: 'Fast Food Pizza delivery' , phone: '111-222-3333', addr: '121 Cashview Ave'},
        {name: 'Umi Hibachi', type: 'American', special: 'Japanese Dining', phone: '111-222-3333', addr: '121 Cashview Ave'},
        {name: 'Christys Hamburgers', type: 'American', special: 'Fast Food Burgers' , phone: '111-222-3333', addr: '121 Cashview Ave'},
        {name: 'Subway', type: 'American', special: 'Fast Food Sandwiches subs', phone: '111-222-3333', addr: '121 Cashview Ave'},
        {name: 'Pettys BBQ', type: 'American', special: 'Fast Food barbecue southern', phone: '111-222-3333', addr: '121 Cashview Ave'}
      ];

      var initialLocation = null;
      var myCenter = new google.maps.LatLng(33.4625, -88.8200);
      var mapProp = {
        center: myCenter,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

      var myCity = new google.maps.Circle(
      {
        center: myCenter,
        radius: 20000,
        strokeColor: "#0000FF",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000FF",
        fillOpacity: 0.4
      });


      var locations = [
        ['Harveys', '33.4554015', '-88.814941', 'food_pointer.jpg'],
        ['The Veranda', '33.4526087', '-88.8194257', 'food_pointer.jpg'],
        ['Casa Bravo Mexican', '33.4532565', '-88.8101641', 'food_pointer.jpg'],
        ['Papa Johns', '33.4565651', '-88.8135248', 'food_pointer.jpg'],
        ['Umi Hibachi', '33.4515882', '-88.822193', 'food_pointer.jpg'],
        ['Christy"s Hamburgers', '33.454202', '-88.8312274', 'food_pointer.jpg'],
        ['Subway', '33.4530025', '-88.8174516', 'food_pointer.jpg'],
        ['Petty"s BBQ', '33.4530025', '-88.8174516', 'food_pointer.jpg'],
      ];

      for (i = 0; i < locations.length; i++)
      {
        var marker = new google.maps.Marker(
        {
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          icon: locations[i][3]
        });
        marker.setMap(map);
      };

      myCity.setMap(map);

      var browserSupportFlag = new Boolean();

      if (navigator.geolocation)
      {
        browserSupportFlag = true;
        alert("location Tracked");
        navigator.geolocation.getCurrentPosition(function(position)
        {
          initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
          alert(initialLocation);
          map.setCenter(initialLocation);
        }, function()
        {
          handleNoGeolocation(browserSupportFlag);
        });
      }
      // Browser doesn't support Geolocation
      else
      {
        browserSupportFlag = false;
        handleNoGeolocation(browserSupportFlag);
      }

      function handleNoGeolocation(errorFlag)
      {
        if (errorFlag == true)
        {
          alert("Geolocation service failed.");
        }
        else
        {
          alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
        }
        map.setCenter(initialLocation);
      }

      $scope.go = function(index)
      {
        alert('go ' + $scope.locations[index].name);
        /*var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();


        directionsDisplay = new google.maps.DirectionsRenderer();
        var mapOptions = {
          zoom: 7,
          center: new google.maps.LatLng(41.850033, -87.6500523)
        };
        var map = new google.maps.Map(document.getElementById('googleMap'),
          mapOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('side'));

        var request = {
          origin: new google.maps.LatLng(41.850033, -87.6500523),
          destination: new google.maps.LatLng(33.4625, -88.8200),
          travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(response, status)
        {
          if (status == google.maps.DirectionsStatus.OK)
          {
            directionsDisplay.setDirections(response);
          }
        });*/
      }
    });
  </script>
</head>
<body ng-controller="ExampleController">
  <table>
    <tr>
      <td>
        <input ng-model="filterKey">
        <ul ng-repeat="location in locations | filter:filterKey "> <a id='name' ng-click="go($index)"> go {{location.name}} </a>
          <br> {{location.phone}}
          <br> {{location.addr}}
          <br>
          <br>
        </ul>
      </td>
      <center>
        <td id="googleMap" align="right" style="width:1200px;height:500px;">
        </td>
      </center>
      <td id="side"> </td>
    </tr>
  </table>
</body>
</html>

从 Javascript 调用传递 AngularJS 值

Passing from Javascript call with AngularJS Values

html

google-maps

angularjs