I couldn't find an answer to my question by searching through the forum. My goal is to populate the input field with the geolocated address after clicking a button, but for some reason the ng-Click="locate()" function is not working. Here is a snippet of my HTML:
<script id="templates/search.html" type="text/ng-template">
<ion-view view-title="Data Entry">
<ion-content class="padding" ng-controller="DataCtrl">
<div class="list">
<!-- Address Input Field -->
<label class="item item-input item-floating-label">
<span class="input-label">Starting Point in Address Form</span>
<input id="address" type="text" placeholder="Starting Point in Address Form">
<button id="curr_loc" class="button button-balanced" ng-Click="locate()">this-one-doesnt-fire</button>
</label>
<!-- Time Input Field -->
<label class="item item-input item-floating-label">
<span class="input-label">Time in Minutes</span>
<input id="time" type="number" placeholder="Time in Minutes">
</label>
</div>
<!-- Transportation Mode Toggle List -->
<div class="item item-divider">
How would you like to explore the area?
</div>
<ion-radio ng-model="$parent.move" value="walk">Walking</ion-radio>
<ion-radio ng-model="$parent.move" value="transit">Public Transit</ion-radio>
<ion-radio ng-model="$parent.move" value="car">Car</ion-radio>
<ion-radio ng-model="$parent.move" value="bike">Bike</ion-radio>
<!-- Button to Start Exploring -->
<button id="explore" ui-sref="map" class="button button-balanced" ng-Click="setData()">Explore</button>
</ion-content>
<ion-tabs class="tabs-balanced tabs-icon-top">
<ion-tab ui-sref="home" title="Home" icon="ion-home"></ion-tab>
<ion-tab ui-sref="faq" title="FAQ" icon="ion-help-circled"></ion-tab>
<ion-tab ui-sref="about" title="About" icon="ion-information-circled"></ion-tab>
<ion-tab ui-sref="impressum" title="Impressum" icon="ion-clipboard"></ion-tab>
</ion-tabs>
</ion-view>
</script>
Here's how my controller is set up:
mapApp.controller("DataCtrl", function($scope, dataService) {
$scope.setData = function() {
var address = document.getElementById("address").value;
var time = document.getElementById("time").value;
var move = $scope.move;
dataService.setData(address,time,move);
};
$scope.locate = function() {
console.log("asd");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
console.log(pos);
document.getElementById("address").value = pos[0] + "," + pos[1];
});
}
};
});
Despite both buttons being similarly defined, clicking on the button does not trigger the locate() function. However, clicking on the "Explore" button successfully triggers the scope.setData() function.
I'm sure it's just a minor error that I can't seem to identify. Any help or insight you can provide would be greatly appreciated.
Thank you in advance for your assistance. Best regards, Jule