NG-包括未在其

使用JavaScript的HTML這是我的HTML代碼的JavaScriptNG-包括未在其

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <style> 
     #map-canvas { 
      height:400px; 
      width:600px; 
     } 
     .controls { 
      margin-top: 16px; 
      border: 1px solid transparent; 
      border-radius: 2px 0 0 2px; 
      box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      height: 32px; 
      outline: none; 
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
     } 
     #pac-input { 
      background-color: #fff; 
      padding: 0 11px 0 13px; 
      width: 400px; 
      font-family: Roboto; 
      font-size: 15px; 
      font-weight: 300; 
      text-overflow: ellipsis; 
     } 
     #pac-input:focus { 
      border-color: #4d90fe; 
      margin-left: -1px; 
      padding-left: 14px; 
      /* Regular padding-left + 1. */ 
      width: 401px; 
     } 
     .pac-container { 
      font-family: Roboto; 
     } 
     #type-selector { 
      color: #fff; 
      background-color: #4d90fe; 
      padding: 5px 11px 0px 11px; 
     } 
     #type-selector label { 
      font-family: Roboto; 
      font-size: 13px; 
      font-weight: 300; 
     } 
    </style> 

    <script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> 
    <script type="text/javascript"> 

     var map; 
     function initialize() { 

      var markers = []; 
      var map = new google.maps.Map(document.getElementById('map-canvas'), { 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 

      var defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(-33.8902, 151.1759), 
        new google.maps.LatLng(-33.8474, 151.2631)); 
      map.fitBounds(defaultBounds); 

      // Create the search box and link it to the UI element. 
      var input = /** @type {HTMLInputElement} */ 
        (
          document.getElementById('pac-input')); 
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

      var searchBox = new google.maps.places.SearchBox(
        /** @type {HTMLInputElement} */ (input)); 

      // Listen for the event fired when the user selects an item from the 
      // pick list. Retrieve the matching places for that item. 
      google.maps.event.addListener(searchBox, 'places_changed', function() { 

       var places = searchBox.getPlaces(); 

       for (var i = 0, marker; marker = markers[i]; i++) { 
        marker.setMap(null); 
       } 

       markers = []; 
       var bounds = new google.maps.LatLngBounds(); 

       for (var i = 0, place; place = places[i]; i++) { 

        // Create a marker for each place. 
        var marker = new google.maps.Marker({ 
         map: map, 
         title: place.name, 
         position: place.geometry.location 
        }); 

        markers.push(marker); 

        bounds.extend(place.geometry.location); 
       } 

       map.fitBounds(bounds); 
      }); 

      google.maps.event.addListener(map, 'click', function(event) { 
       var myLatLng = event.latLng; 
       var lat = myLatLng.lat(); 
       var lng = myLatLng.lng(); 
       var x = 'Latitude is =' + lat + 'Longitude is=' + lng; 
       var TheTextBox = document.getElementById("lat"); 
       TheTextBox.value = lat; 
       var TheTextBox1 = document.getElementById("long"); 
       TheTextBox1.value = lng; 
       // alert(x); 
      }); 
     } 
     google.maps.event.addDomListener(window, "load", initialize); 
    </script> 
</head> 
<body> 
<div id="map-canvas"></div> 
<input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
<input type="text" name="lat" id="lat"> 
<input type="text" name="long" id="long"> 

</body> 
</html>

我在的地方，其中呼籲點擊事件的各種意見有角的應用程序一起，它是處理從$locationprovider和$routeprovider從一個單一的js文件控制器和所有。

現在的問題是，當我試圖在其中一個視圖中使用ng-include功能時，它無法正常工作。文本框是可見的，但地圖不是。我甚至嘗試使用onload的東西來初始化函數，這是我原來的HTML頁面，但仍然無法正常工作。

在控制檯上的錯誤是 - ReferenceError: google is not defined

當JavaScript的部分無法使用谷歌地圖腳本發生。

選中此有關錯誤信息：Reference Error - StackOverflow Question

NG-包括代碼

 <ng-include 
     src="'testmap.html'" 
     [onload="initialize();"] 
     > 
     </ng-include>

請讓我知道我必須做的整治。

謝謝你的時間。如果您需要我的更多說明，請讓我知道。

來源

2016-02-12 Gandalf the White

ng-include不是iframe的替代品。它是爲了在其他模板中添加模板來實現角度，這可能包括對實際角碼的調用。您正在試圖將整個html頁面，head標籤和所有其他頁面包含到另一個頁面中，這不僅僅是無效的html，而且除非在iframe元素中進行，否則也是毫無意義的。

我建議你將你的代碼重構成google maps角度指令。

來源

2016-02-12 15:27:52 SirDemon

感謝您的回覆@SirDemon。我確實在官方網站上閱讀過有關ng-include的文檔，並且我意識到這個事實，也就是爲什麼我發佈了相同的問題。我很確定很多人會喜歡在某個時間點做類似的事情。我正在從Stackoverflow上的源代碼收集的建議，我會用results.Cheers更新這個線程！ –

NG-包括未在其

回答

相關問題