AngularJSでControllerからViewに変数を渡す

Question

私はPlacesライブラリとangular google places autocompleteモジュールを使用しています。オートコンプリート機能は完全に機能し、結果はクリック時に表示され選択されます。

私が今しようとしているのは、ユーザがオートコンプリートの結果の1つを選択すると、アドレスからマップを生成することです。

私は私のコントローラで、以下の機能を持っている：それは動作しません

$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要素にアクセスすることはできませんので、それがあることをかなり確信していますテンプレートビューの内部にあります）。私は、ユーザーが結果を選択したときにマップが表示されるようするために2つのリンク（またはフロントエンドに緯度とLNG変数を渡す）可能性がどのように

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

？

EDIT

私はエラーを示しPlunkrを作りました。あなたが場所を選択すると、私の場合、リダイレクトがhttp：// localhost：9000 /（1.650801、％2010.267894999999953）になります。最後の部分は緯度と経度です。

Answer 1

オクラホマ - 私はいくつかの点を調整しました。変数宣言にいくつかの問題があったと思います。これでマップオブジェクトが読み込まれます。私はあなたがそれはあなたがplunkrを追加することができます任意のチャンス

(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); 
     }); 
    }); 
})(); 

Plunkr