在AngularJS中将变量从Controller传递到View

Question

我正在使用地方信息库和谷歌角度的角度自动完成模块。 自动完成功能可以完美运行，点击显示并选择结果。

我现在想做的是一旦用户选择自动完成的结果之一，就从该地址生成一个地图 。

我的控制器中具有以下功能：

$scope.$on('g-places-autocomplete:select', function(event, place) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( { "address": place.name }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
            location = results[0].geometry.location,
                lat      = location.lat(),
                lng      = location.lng();

            var latlng = new google.maps.LatLng(lat,lng);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    });
});

它不起作用，我很确定这是因为它无法从前端访问map_canvas元素（其本身在模板视图中）。

<div id="map_canvas" style="height:300px;"></div>

当用户选择结果时，如何链接两者（或将lat和lng变量传递到前端）以使地图显示？

编辑

我做了一个说明错误的Plunkr 。 您会看到选择位置后，它会重定向到http：// localhost：9000 /（1.650801，％2010.267894999999953） ，这是纬度和经度的最后一部分。

Answer 1

好的-我调整了一些内容，主要是出于风格上的考虑。 我认为您在变量声明方面遇到了一些问题。 现在将加载地图对象。 我会让你大吃一惊，让它显示数据:-)

(function(){

  var app = angular.module('wopWop', ['google.places']);

  app.controller('MainController', function($scope){
        $scope.$on('g-places-autocomplete:select', function(event, place) {
          var loc, lat, lng, latlng, map, options,
              geocoder = new google.maps.Geocoder();

          geocoder.geocode( { "address": place.name }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
                    loc = results[0].geometry.location,
                    lat = loc.lat(),
                    lng = loc.lng();
                  }
            });
            latlng = new google.maps.LatLng(lat,lng);
            options = {
               zoom: 1,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), options);
        });
  });
})();

普伦克