未捕獲ReferenceError：saveData未在Google地圖中定義

Question

我使用Ruby on Rails而不是PHP和MySQL（類要求）來跟蹤this tutorial。我可以右鍵點擊地圖添加一個標記，左鍵單擊標記以創建一個infowindow彈出窗口，我可以填寫infowindow，但是當我點擊'保存&關閉'時，我收到錯誤

Uncaught ReferenceError: saveData is not defined at HTMLInputElement.onclick (http://localhost:4000/#/user:1:1)onclick @ VM83 user:1

使用debugger，我可以確認saveData()永遠不會被調用。

我需要做些什麼才能將輸入的信息保存到infowindow中？另外，如果你在我的承諾鏈下面的mapController.js（是否正確等）輸入。

事情我已經試過

• 每StackOverflow的建議index.html的script標籤去除async defer。
• re onclick='saveData()'，我刪除了所有排列中的引號和括號。
• 我手動輸入找到onclick='saveData()'的行。
• 我將每個stackOverflow建議的initalyze函數中的saveData函數移動了。
• 我將其重命名爲infowindow.saveData()每個堆棧溢出建議。
• 在initialize（）之上移動saveData（）。
• 改變所有let s至var小號
• 加入onload='initialize()'在_user.html div標籤，幾個置換包括嵌套的div，移動ng-controller等
• 從mapController.js移動代碼到腳本內_user.html標籤。

我的代碼

_user.html

<div ng-controller="mapController as map" id="map" style="width:100%; height:80vh;"></div> 

mapController.js

angular.module('tour').controller('mapController', function() { 
let self = this, 
marker, 
infowindow; 
function initialize() { 
    var latlng = new google.maps.LatLng(37.0902, -95.7129); 
    var options = { 
    zoom: 4, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map"), options); 
    var html = "<table>" + 
      "<tr><td>Title:</td> <td><input type='text' id='title'/> </td> </tr>" + 
      "<tr><td>Description:</td> <td><input type='text' id='description'/></td> </tr>" + 
      "<tr><td>Audio URL:</td> <td><input type='url' id='audio'/></td> </tr>" + 
      "<tr><td>Category:</td> <td><select id='category'>" + 
      "<option value='art' SELECTED>art</option>" + 
      "<option value='history'>history</option>" + 
      "<option value='literature'>literature</option>" + 
      "<option value='music'>music</option>" + 
      "</select> </td></tr>" + 
      "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>"; 
    infowindow = new google.maps.InfoWindow({ 
    content: html 
    }); 

    google.maps.event.addListener(map, "rightclick", function(event) { 
    marker = new google.maps.Marker({ 
     position: event.latLng, 
     map: map 
    }); 
    google.maps.event.addListener(marker, "click", function() { 
     infowindow.open(map, marker); 
    }); // end addListener 
    }); // end addListener 
} // end initialize function 

function saveData() { 
    var marker = { 
    title: escape(document.getElementById("title").value), 
    description: escape(document.getElementById("description").value), 
    audio: document.getElementById("audio").value, 
    category: document.getElementById("category").value, 
    longitude: marker.lng(), 
    latitude: marker.lat() 
    } 

    return $http({ 
    url: `${rootUrl}/users/:id/add_marker`, 
    method: 'POST', 
    data: {marker: marker}, 
    headers: { 
     'Authorization': 'Bearer ' + JSON.parse(localStorage.getItem('token')) 
    } 
    }) 
    .then(function(res){ 
    let markers = self.currentUser.markers; 
    let newMarker = res.config.data.marker; 
    markers.unshift(newMarker); // adds to beginning of array 
    }) 
    .catch(function(error){ 
    console.log('ERROR ~>', error); 
    }); 
} 

initialize(); 
}); 

Answer 1

window.saveData = function(){ /* your code here */ } 
onclick="window.saveData()"